0

行に列を作成するにはどうすればよいですか？

これで、列は次々に垂直になります。

例：

█</p>

█</p>

█</p>

しかし、私はそれらを水平に構築する必要があります。

███</p>

これはソースコードへのリンクです。

4

5 に答える 5

3

それらをいくつかの外側にラップし、 のプロパティを<div>設定することをお勧めします。 これを行う方法の基本的な例を次に示します。float: left<div>

​HTMLコード：

<div class="column"​​​​​​​​​&gt;
   <span>Simply dummy text</span>
</div>

<div class="column">
   <span>Simply dummy text</span>
</div>

<div class="column">
   <span>Simply dummy text</span>
</div>

そしてCSS：

.column {
   width: 160px;
   height: 200px;
   background-color: #eeeeee;
   float: left;
   margin-left: 5px;
   text-align: center;
}​


注:これはjsfiddleの作業例です。

注 2:また、これclassを要素だけに使用する場合<div>は、 として宣言しdiv.columnます。更新

: @ponchaの提案 に感謝します。回答が更新されました。

于 2012-06-23T11:04:17.220 に答える
1

いくつかの可能な解決策。

1)float: left同じ行に並べる必要がある各 s で使用します。必要に応じて、それらのそれぞれに幅を追加して、コンテンツが乱雑にならないようにします。親コンテナにすべての <div> を含める

2) を使用して、各 s を水平方向に並べて表示します。display: inline

3）実際には、これは以前のSO回答からコピーされたもので、何度も使用しました...

<style>
 #whatever div {
  display: inline
  margin: 0 1em 0 1em
  width: 30%
}
</style>

<div id="whatever">
 <div>content</div>
 <div>content</div>
 <div>content</div>
</div>

https://stackoverflow.com/a/226261/608170

于 2012-06-23T11:11:32.020 に答える
1

意味的にはリストのように思えます。あなたは実際にIE7を気にする必要がありますか? そうでない場合は、次のようなマークアップをレンダリングすることをお勧めします

<ul class="inline-list">
  <li>my content</li>
  <li>my content</li>
  <li>my content</li>
</ul>

そしてCSS経由で使用します

.inline-list li {
  display: inline-block;
}

ここにフィドルがあります

リスト エントリはブロック要素のように動作するので (たとえば単純な div のように)、幅や高さなどを適用できます。（フローティング私見にとってはそれほど簡単ではないでしょう）

IE7 の場合: ブロック要素として表示される場合は適切な劣化が発生しますが、ユース ケースによって異なります (display: inline を使用してこれを解決できるかもしれませんが、現時点では証明できません)。

于 2012-06-23T11:12:03.620 に答える
0

float:left を div に追加し、overflow:hidden プロパティで固定幅を追加

div { 
    -webkit-column-width: 300px;
    -webkit-column-height: 300px;    
    height: 300px;
    width:300px;
    float:left;
    -webkit-column-gap:0px;
    overflow:hidden;
}

デモ: http://jsfiddle.net/surendraVsingh/52u4W/1/

于 2012-06-23T11:08:14.983 に答える
0

これを試して

 <div>
        <div id="one" class="clhr">
             <h3>Column1</h3>
        </div>
        <div id="two" class="clhr" >
             <h3>Column2</h3>
        </div>
        <div id="three" class="clhr">
             <h3>Column3</h3>
        </div>
    </div>

   .clhr {
    border: 1px solid red;
    float: left;
    height: 300px;
    margin-right: 16px;
    width: 200px;
}
于 2012-06-23T11:08:30.363 に答える