css - 并排渲染并堆叠的 div

Question

我正在从引导程序中调整英雄模板。

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

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

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

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

任何想法？

Answer 1

使用媒体查询为不同尺寸的屏幕创建不同的样式。

对于全尺寸屏幕，您可以执行以下操作：

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

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

CSS：

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

上面的布局将使leftdiv 向左浮动，宽度为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>