写真のようにdivを配置したいのですが、方法がわかりません。
おそらくパディングは自動に設定できますか？
誰でも私を助けることができますか？
質問する
623 次
7 に答える
1
<style type="text/css">
.main-container{
width:400px;
background: #007caa;
display: block
}
.block{
display: block;
display: inline-block;
width:auto;
margin:5px;
background: #dbf2fa;
padding: 10px;
}
*+html .block{
display: inline
}
</style>
</head>
<body>
<div class="main-container">
<div class="block">Development</div>
<div class="block">Designing</div>
<div class="block">Drupal</div>
<div class="block">Omega</div>
<div class="block">Drupal</div>
<div class="block">Designing</div>
<div class="block">Development</div>
<div class="block">Drupal</div>
<div class="block">Omega</div>
<div class="block">Development</div>
<div class="block">Drupal</div>
<div class="block">Omega</div>
</div>
于 2012-09-12T09:03:52.477 に答える
1
インラインブロックでこれを試すことができます。おそらくこのタイプのものに最適な方法ですが、IEの下位バージョンでは普遍的にサポートされていません。
JSFiddleの例：http ：//jsfiddle.net/NdK7c/
letter-spacing参考：親UL要素に正を追加letter-spacing: normalし、次に子li要素を追加して継承された文字間隔を修正することにより、各要素間に間隔を作成できます。
更新されたフィドル：http：//jsfiddle.net/2suGg/1/
于 2012-09-10T12:53:05.347 に答える
1
w3c FlexBoxモデルの仕様に役立つ可能性のある別のアプローチ...しかし、シナリオの詳細がないと言いにくい.
于 2012-09-10T12:19:51.907 に答える
0
より良いものを試して、そこから作業する必要があります。
ul{
text-align:justify;
}
ul li{
display:inline;
padding:10px;
margin:10px;
line-height:60px;
background-color:orange;
white-space:nowrap;
}
于 2012-09-10T12:47:32.197 に答える
0
CSSの「display」および「float」スタイルを使用して、画像に言及したようなdivを配置できます。float スタイルを使用する場合、最後の float div の最後で float をクリアする必要があります。
スタイル「表示」の概念については、リンクhttp://jsfiddle.net/ybhR9/2/を参照してください。
于 2012-09-10T12:25:10.103 に答える
0
正当化された配置（左側と右側の両方に配置）を達成しようとしていると思います。
Javascript からマージンを割り当ててから、div フローをインラインにすることをお勧めします。浮く必要はありません。
アルゴリズム：
- Whenever the container is resized
-- Create a copy of the container such that it is not user-visible but still layouted by the browser
-- Set all element margins to zero
-- Collect the elements by rows
-- For each row (except the last one, maybe)
--- Calculate the largest element margin that will not cause an overflow
--- Round down to whole pixels
--- Determine the deficit due to rounding
--- Set each element the margin, and distribute the deficit (one pixel to each)
-- Force the browser to recalculate the layout
-- Replace the container with the new one
于 2012-09-10T12:29:28.023 に答える
0
ありがとう！これはIEでは機能しますが、Chromeでは機能しません.. :(
.enlarge-categores ul{
text-align: justify;
text-justify:distribute;
}
.enlarge-categores ul li{
color: white;
font-size: 14px;
display:inline;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
line-height: 60px;
margin:10px;
background-color:#f39900;
}
于 2012-09-10T13:56:26.763 に答える