0

これが私のcssです：

<style type="text/css">
    .column_n {
        margin: 20px;
        float: left;
        width: 250px;
    }
</style>

問題は、ページの左側に列が表示されることです。しかし、左側の要素が終了すると、他の div のテキストがその下に入力され始めます。このようなもの：

xxxxxx yyyyyy
xxxxxx yyyyyy
xxxxxx yyyyyy
xxxxxx yyyyyy  
yyyyyyyyyyyyy
yyyyyyyyyyyyy

私が欲しいのは：

xxxx yyyy
xxxx yyyy
xxxx yyyy
     yyyy
     yyyy

どうすればこれを達成できますか?

ありがとうございました！

HTML コード:

<div class="column_n"> 
    xxxxxxxxxxxxxxxxxxxxxxxxxxx 
</div>
<div> 
    yyyyyyyyyyyyyyyyyyyyyyyy 
</div>
4

5 に答える 5

0

私はこのようにしました：

.column_n {マージン：20px; フロート：左; 幅：250px; }

.column_b {左：290px; 位置：絶対; }

于 2013-01-09T19:53:46.940 に答える
0

set this - 

display: inline-block;

For both columns. using float: left might not be necessary.

于 2013-01-09T19:08:16.100 に答える
0

HTML:

<div class="column_b"> 
    yyyyy yyy yyyyyyyyyyyyyyyy    ssssssssss sssssssssssss
</div>
<div class="column_c"> 
    ddddddddddd dddddddddd dddddddda assssssssssss
</div>

CSS:

<style type="text/css">
   .column_c {
     width:100px;
    background-color:red;
overflow:hidden;
   float:left;
    }
 .column_b {
   float:left;
          width:100px;
overflow:hidden;

    background-color:blue;
    }
</style>

ここにあなたが望むもののjsfiddleがあります：

http://jsfiddle.net/YDFLV/62/

于 2013-01-09T19:20:28.183 に答える
0

Roy の提案に従ってインラインを使用するように更新されましたが、display:inline-block ではなく、display:inline を使用する必要があります。

デモはこちら: http://tinkerbin.com/VAEFGoBm

これを試して ：

<style type="text/css">
    .column_n {
        margin: 20px;
        display:inline;
        width: 250px;
    }
 .column_b {
        margin: 10px;
        display:inline;
        width: 250px;
    }
</style>

<div class="column_n"> 
    xxxxxxxxxxxxxxxxxxxxxxxxxxx 
</div>
<div class="column_b"> 
    yyyyyyyyyyyyyyyyyyyyyyyy 
</div>
于 2013-01-09T19:07:07.410 に答える
0

これを試して：

<style type="text/css">
    .column_n {
        margin: 20px;
        float: left;
    }
    div{
        width: 250px;
        display: inline-block;
    }
</style>

http://jsfiddle.net/TeMWS/1/

于 2013-01-09T19:40:11.953 に答える