浮動小数点なしで複数のdivを水平に一緒に積み重ねることはできませんか？

-3

私は最近、複数のdivをコンテナ内に水平に並べることができないことを認識しました。浮動小数点なしで複数のdivを水平に一緒に積み重ねることはできませんか？

inline-blockをコンテナ要素内のdivに適用し、widthを%に指定しました。余分なスペースがあるようです。私はそれが隠された文字のためだと知っています。画像の下に参照してください - レッドラインは、私はinline-blockを使用して下の画像のようにそれを作ると、コンテナの幅全体を占有するコンテナの

です。フレックスボックスを親に使うことはできません。なぜなら、レスポンスにしたり、ブレークポイントの後にいくつかの要素を隠したり再配置したりしたいからです。また、divを外部に引き出してコンテナ要素を無駄にするので、浮動小数点数を使用したくない。また、スペースやタブを削除して動作させるのは意味がありません。そこにコードを入力するのは面倒です。今

CSSに来る、何かが存在しなければなりません。これはイライラしてはいけませんし、CSSはこのダムであってはいけません。

ここに私のコードだ、

.container{ 
 
\t width: 100%; 
 
\t height: auto; 
 
} 
 

 
.section{ 
 
\t display: inline-block; 
 
} 
 

 
.homebar{ 
 
\t width: 24%; 
 
\t height: 600px; 
 
\t background-color: #222; 
 
} 
 
.content{ 
 
\t width: 50%; 
 
\t min-width: 500px; 
 
\t height: 600px; 
 
\t background-color: #fbfbfb; 
 
} 
 
.sidebar{ 
 
\t width: 24%; 
 
\t height: 600px; 
 
\t background-color: #158; 
 
}

<div class="container"> 
 

 
<!-- Home/Menu Bar--> 
 
<div class="section homebar"> 
 

 
</div> 
 

 
<!-- Content Area --> 
 
<div class="section content"> 
 

 
</div> 
 

 
<!-- Sidebar Area --> 
 
<div class="section sidebar"> 
 

 
</div> 
 

 
</div>

出典

2016-11-30 Abhishek Pathak

「div」の間のスペースを削除するだけです。 –

http://stackoverflow.com/q/5078239/483779 – Stickers

@PraveenKumarそれは私がしたくないことです...私はそれらの答えを見ました。コードを整理することは非常に困難です。不器用なフォーマットでコード化することはできません –

私は最近、この問題に出くわしたと私は何を見つけたことは、インライン・ブロックを使用している場合はdivを整列するということです。ブラウザHTMLは、フォントサイズのために各divブロックの右側に自動的にデフォルトマージンを追加します。私のシナリオで良いと思った唯一の解決策は、私たちがスタイルのdivに-4px（デフォルトのフォントサイズのためにブラウザで使用されるデフォルトスペース）の右マージン修正を加えることによってdivに加わることでした。

.sectionクラスにmargin-right:-4px;を追加するだけでよいでしょう。

.containerクラスでfont-size:0px;を使用することもできますが、コンテナ内の各要素のフォントサイズをリセットする必要があります。そのため、余白調整ソリューションを使用した理由がわかります。

これが役に立ちます。 inline-blockとして配置されている要素の間remove spaceへ

出典

2016-11-30 14:25:38

、parent divにfont-size:0pxを設定するか、または第二の選択肢は、以下のようにnegative marginの使用がマーキングされ、

#container{ 
 
    width:100%; 
 
    height:auto; 
 
    overflow:hidden; 
 
    border:2px solid red; 
 
    font-size:0px; 
 
} 
 
#container > .homebar{ 
 
width:33.2%; 
 
height:200px; 
 
display:inline-block; 
 
background:yellow; 
 
} 
 
#container > .content{ 
 
width:33.3%; 
 
height:200px; 
 
display:inline-block; 
 
background:green; 
 
} 
 
#container > .sidebar{ 
 
width:33.3%; 
 
height:200px; 
 
display:inline-block; 
 
background:blue; 
 
}

<div id="container"> 
 
<!-- Home/Menu Bar--> 
 
<div class="section homebar"> 
 
</div> 
 
<!-- Content Area --> 
 
<div class="section content"> 
 
</div> 
 
<!-- Sidebar Area --> 
 
<div class="section sidebar"> 
 
</div> 
 
</div>

出典

2016-11-30 14:26:18 frnt

あなたはこれらのギャップがあり得る理由divのフォントサイズのためです。基本的に、私は常に最初から問題を解決するために、私のページでnormalizeを使用

div { 
 
    border: 1px solid black; 
 
    font-size: 0; 
 
} 
 

 
.container{ 
 
\t width: 100%; 
 
\t height: auto; 
 
} 
 

 
.section{ 
 
\t display: inline-block; 
 
} 
 

 
.homebar{ 
 
\t width: 24%; 
 
\t height: 600px; 
 
\t background-color: #222; 
 
} 
 
.content{ 
 
\t width: 50%; 
 
\t min-width: 500px; 
 
\t height: 600px; 
 
\t background-color: #fbfbfb; 
 
} 
 
.sidebar{ 
 
\t width: 24%; 
 
\t height: 600px; 
 
\t background-color: #158; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<div class="container"> 
 

 
<!-- Home/Menu Bar--> 
 
<div class="section homebar"> 
 

 
</div> 
 

 
<!-- Content Area --> 
 
<div class="section content"> 
 

 
</div> 
 

 
<!-- Sidebar Area --> 
 
<div class="section sidebar"> 
 

 
</div> 
 

 
</div 
 
</body> 
 
</html>

：ソリューションに注意してください。

出典

2016-11-30 14:27:04 Chen

浮動小数点なしで複数のdivを水平に一緒に積み重ねることはできませんか？

答えて

関連する問題