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>
相关问题
最新问题