Divs并排?

时间:2014-10-04 05:44:05

标签: html css twitter-bootstrap

我想在引导程序(或没有引导程序)的左侧保留Div 1,2和3,但是当我向div1添加文本或高度增加时,div3会转到右侧(我想在左侧保留div3) )。

这是bootply example.

Image

Text3(div3)应位于左侧。

我还为div添加了float:left;,但它没有用。

我该如何解决这个问题?

HTML

<div class="container">      
    <div class="col-md-6">
      Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .
      Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .
      Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .
      Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .
       Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .
    </div>      
    <div class="col-md-6">
      Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .
      Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .
      Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .
    </div>      
    <div class="col-md-6">
      Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .
      Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .
      Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .
    </div>
</div>

CSS

.container{
    border:1px solid #ff0000;
}
.col-md-6{
    float:left;
}

8 个答案:

答案 0 :(得分:1)

只需使用Bootstrap的.row类,如下所示:

Bootply - DEMO

<div class="container">
  <div class="row">
        <div class="col-md-6">
          Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .
          Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .
          Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .
          Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .
           Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .
        </div>
        <div class="col-md-6">
          Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .
          Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .
          Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .
        </div>
  </div> 
  <div class="row">
        <div class="col-md-6">
          Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .
          Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .
          Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .
        </div>
    </div>
</div>

答案 1 :(得分:0)

将css规则clear:both添加到最后一个div或更改col- *类以适应引导网格系统

答案 2 :(得分:0)

使用(将md更改为任何大小):

<div class="clearfix visible-md-block"></div>

如果您希望打破各种尺寸,请删除visible-md-block。 (如果那是你想要做的,那么也许你应该创建一个新行。)

另外,不要忘记将.row添加到容器中。

演示:http://jsfiddle.net/DerekL/v2371qza/3/embedded/result/

引自the documentation

<div class="row">
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
    <!-- Optional: clear the XS cols if their content doesn't match in height -->
    <div class="clearfix visible-xs-block"></div>
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

答案 3 :(得分:0)

使用bootstrap,您可以为上一个.clear添加.col-md-6课程,也可以在最后.col-md-6之前添加div

<div class="clear"></div>

答案 4 :(得分:0)

HTML:

<div class="container">

        <div class="col-md-6">
          Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .
          Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .
          Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .
          Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .
           Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .
        </div>

        <div class="col-md-6">
          Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .
          Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .
          Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .
        </div>


        <div class="col-md-6" id ="left">
          Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .
          Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .
          Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .
        </div>
</div>

的CSS:

.container{
    border:1px solid #ff0000;
}
#left {
  clear:left;
}

清除必须出现在左侧的div的左侧。

答案 5 :(得分:0)

如果你不想使用Bootstrap,这里是如何实现目标的小提琴 Without Bootstrap。尝试使用Display:inline-block代替float,您可以忽略我在jsfiddle示例中使用的div之间的margin

欢迎查询

答案 6 :(得分:0)

你可以col-sm-12

<div class="col-sm-12">
    <div class="col-sm-6">
      Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .
      Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .
      Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .
      Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .
       Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .
    </div>
    <div class="col-sm-6">
      Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .
      Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .
      Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .
    </div>
</div> 
<div class="col-sm-12">
    <div class="col-sm-6">
      Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .
      Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .
      Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .
    </div>
</div>

答案 7 :(得分:-1)

我认为这就是你在哪里寻找我给你的HTML Mark-UP&amp; CSS。如果您还有其他问题,请随时提出。

/*YOUR CSS MARK UP*/
#left-container{
width:400px;/*this width can be whatever you want*/
position:absolute;
top:0;
left:0;
}
#one{
width:200px;
height:300px;
background-color:#0CF;
}
#two{
width:200px;
height:300px;
background-color:#C69;
}
#three{
width:200px;
height:300px;
background-color:#C96;
}
<!--Your HTML MARK UP BELOW-->
<html>
<head>
</head>
<body>
<div id="left-container">
<div id="one">This is some text. This is some text. This is some text. This is some text. This is          some text. This is some text. This is some text.</div>
<div id="two">This is some text. This is some text. This is some text. This is some text. This is    some text. This is some text. This is some text.</div>
<div id="three">This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</div>
</div>
</body>
</html>