Divs并排呈现并堆叠

Question

我正在调整引导程序中的hero template。

嵌套在hero-unit div中我希望有两个div在宽屏幕中并排呈现，如：

 |text 30% container width||picture the rest of container width|

并在狭窄的屏幕（智能手机）堆叠：

|text full container width|
|picture full container width|

有什么想法吗？

Answer 1

使用media queries为不同大小的屏幕创建不同的样式。

对于全尺寸屏幕，您可以这样做：

<div id="left" class="cont">
</div>

<div id="right" class="cont">
</div>

CSS：

#left{
    float: left;
    width: 30%;
}
#right{
     overflow: hidden;
}

上面的布局会让left div浮动到左边，宽度为30%，右边的div会占用剩余的空间。

---

对于手机屏幕，您的CSS会略有不同。

<div id="left" class="cont">

</div>

<div id="right" class="cont">

</div>

CSS：

.cont{
    width: 100%;
    float: left;
    clear: both;
    /* Margins, padding, etc. */
}

Answer 2

你不能只使用内置的网格系统吗？

<div class="hero-unit">
  <div class="row-fluid">
   <div class="span3">text</div>
   <div class="span9"><img src="img.jpg"></div>
  </div>
</div>