0

我想要一个 3 列布局，从内容的角度来看，我的标记在语义上是有意义的：

<!-- 1. main-->
<div>
  <div class="product"></div>
  <div class="product"></div>
  <div class="product"></div>
  <div class="product"></div>
</div>
<!-- 2. side bar -->
<div>
</div>
<!-- 3. other info -->
<div>
</div>

我正在寻找包含产品的子 2 列布局、侧边栏以及页面底部的其他 div 的主列的以下布局：

布局

我创建了一些引导代码并有以下问题：

  1. 运行下面的代码时，为什么other最后的 div 向左偏移，我该如何解决？
  2. 理想情况下，我希望保持 html 尽可能干净（不添加任意行/列），但是让产品 div 并排堆叠 2 宽（每个宽度相等）并相互折叠的最干净的方法是什么当浏览器宽度减小时？

代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Untitled 1</title>
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <style type="text/css">

    div {
    border: 1px solid blue;
    }

    </style>
</head>

<body>
    <div class='container'>
        <h1></h1>
        <div class='navbar navbar-inverse'>
          <div class='navbar-inner nav-collapse' style="height: auto;">
            <ul class="nav">
            </ul>
          </div>
        </div>
        <div id='content' class='row-fluid'>
            <div id='main' class='span9'>
                <h2>Main</h2>
                <div class="product">
                    <p>Item 1</p>
                </div>
                <div class="product">
                    <p>Item 2</p>
                </div>
                <div class="product">
                    <p>Item 3</p>
                </div>
                <div class="product">
                    <p>Item 4</p>
                </div>
            </div>
            <div id='sidebar' class='span3'>
                <h2>Side</h2>
            </div>
            <div id='other' class="row">
                <div class="span12">
                    <p>other details here</p>
                </div>
            </div>
        </div>
  </div>
</body>

</html>
4

1 回答 1

1

检查http://www.bootply.com/64966是否接近您所追求的。我将每对产品 div 放在嵌套行中（更多关于流体嵌套的信息）。

祝你好运！ 

<div class="container">
    <h1></h1>
    <div class="navbar navbar-inverse">
      <div class="navbar-inner nav-collapse" style="height: auto;">
        <ul class="nav">
        </ul>
      </div>
    </div>
    <div id="content" class="row-fluid">
        <div id="main" class="span9">
            <h2>Main</h2>
          <div class="row-fluid"> <!-- start nested row -->
            <div class="product span6">
                <p>Item 1</p>
            </div>
            <div class="product span6">
                <p>Item 2</p>
            </div>
          </div> <!-- end nested row -->

          <div class="row-fluid"> <!-- start nested row -->
            <div class="product span6">
                <p>Item 3</p>
            </div>
            <div class="product span6">
                <p>Item 4</p>
            </div>
            </div> <!-- end nested row -->
        </div>
        <div id="sidebar" class="span3">
            <h2>Side</h2>
        </div>
</div> <!-- close row-fluid -->

        <div id="other" class="row-fluid">
            <div class="span12">
                <p>other details here</p>
            </div>
        </div>
    </div>
于 2013-06-19T23:00:57.257 回答