0

谁能帮我解决这个问题，我正在使用引导程序开发我的网站，到目前为止我有两行。

   <section role="main">
       <div class="container">
        <div class="row no-space"><!-- Row 1 -->
            <div class="span3">             
                <h2>{ logo here }</h2>
                <h3>[ logo here ]</h3>
            </div>

            <div class="span6">
                <h2>Text here, text here <em>text here</em>...</h2>
                <h2>text here!</h2>
            </div>

            <div class="span3">
                <img src="img/coffee.png" alt="Coffee and code">
            </div>

        </div><!-- /Row 1 -->

        <div class="row no-space"><!-- Row 2 -->
            <div class="span3">
                <img src="img/code01.png" alt="Coda2 code">
            </div>                  
            <div class="span3">
                <img src="img/code01.png" alt="Coda2 code">
            </div>
        </div><!-- /Row 2-->
    </div><!-- Container -->
 </section><!-- MAIN -->

整个网站将使用span3和6构建，span3的高度为220，span6的高度为460。因为 span6 的高度是 span 3 的两倍，所以第一行的 span3 和第二行的第一个 span3 之间的间距为 240px。

如何消除这个差距，我尝试了嵌套，但并不是我真正需要的东西，因为每次重新加载网站时 divs(span3) 都会被打乱。

感谢您的时间和帮助。

4

1 回答 1

0

我认为您想要做的是将跨度视为列并在列内添加数据

   <section role="main">
   <div class="container">
    <div class="row no-space"><!-- Row 1 -->
        <div class="span3">             
            <h2>{ logo here }</h2>
            <h3>[ logo here ]</h3>
            <img src="img/code01.png" alt="Coda2 code">
        </div>

        <div class="span6" data-rowspan="2" data-colspan="2">
            <h2>Text here, text here <em>text here</em>...</h2>
            <h2>text here!</h2>
        </div>

        <div class="span3">
            <img src="img/coffee.png" alt="Coffee and code">
            <img src="img/code01.png" alt="Coda2 code">
        </div>

    </div><!-- /Row 1 -->
</div><!-- Container -->

于 2013-06-19T20:33:22.230 回答