Question

我在这个布局上工作，我喜欢大8列和大4列。现在我正在重复大的8列像水平列表，但不知何故大4列移位大8。 enter image description here

hello列移动。 我在我的个人网站上有一个小提琴，所以你可以看看这里的实例。请告诉我我在哪里做错了。谢谢。 LINK 感谢。

Answer 1

请尝试以下布局/代码。同时分享这些代码，这样我们就可以帮助您更好地理解您的问题。

<div class="row bordered ">

    <!-- Item -->
    <div class="large-8 columns bordered singleItem">
        <div class="columns large-6  small-6 bordered">
            <div class="columns large-11 small-11 centered">

                <img src="img/image1.jpg" alt="Alternate Text">

            </div>
        </div>

        <!-- Car Side Stats -->
        <div class="columns large-6 small-6 bordered">
            <div class="columns large-12 small-12"><h6>Mercedes Benx 600</h6></div>
        </div>
    </div>
<!-- Right Search -->
    <div class="large-4 small-12 columns bordered">
        <div class="large-11 large-offset-1 columns bordered">
            <h3>hELLO</h3>


        </div>
    </div>

    <div class="large-8 columns bordered singleItem" style="float: left;">
        <div class="columns large-6  small-6 bordered">
            <div class="columns large-11 small-11 centered">

                <img src="img/image1.jpg" alt="Alternate Text">

            </div>
        </div>

        <!-- Car Side Stats -->
        <div class="columns large-6 small-6 bordered">
            <div class="columns large-12 small-12"><h6>Mercedes Benx 600</h6></div>
        </div>
    </div>



    <!-- Endd Right Search -->
</div>

编辑：

注释的可能修复，对于窗口调整大小底部的 hello div。

请问你的CSS @media查询。我觉得它与这些css类小6，大6，小12有关。在您快速查看评论中提供的链接后，这只是一个建议。

Answer 2

你有一个接一个地连续两个大8字节，它们垂直堆叠。

在big-8 div之间有你的大4 div

    <body>

    <div class="row bordered ">

        <!-- Item -->
        <div class="large-8 columns bordered singleItem">
            <div class="columns large-6  small-6 bordered">
                <div class="columns large-11 small-11 centered">

                    <img src="img/image1.jpg" alt="Alternate Text">

                </div>
            </div>

            <!-- Car Side Stats -->
            <div class="columns large-6 small-6 bordered">
                <div class="columns large-12 small-12"><h6>Mercedes Benx 600</h6></div>
            </div>
        </div>
<div class="large-4 small-12 columns bordered">
            <div class="large-11 large-offset-1 columns bordered">
                <h3>hELLO</h3>


            </div>
        </div>


        <div class="large-8 columns bordered singleItem">
            <div class="columns large-6  small-6 bordered">
                <div class="columns large-11 small-11 centered">

                    <img src="img/image1.jpg" alt="Alternate Text">

                </div>
            </div>

            <!-- Car Side Stats -->
            <div class="columns large-6 small-6 bordered">
                <div class="columns large-12 small-12"><h6>Mercedes Benx 600</h6></div>
            </div>
        </div>


        <!-- Right Search -->


        <!-- Endd Right Search -->
    </div>




    <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
        $(document).foundation();
    </script>


</body>

Answer 3

您必须将large-4列放在large-8 columns之间，如this。

所以基本上发生了两个large-8列向左浮动的情况，但是它们的宽度总和大于屏幕宽度，所以它们一个接一个地堆叠，而不是并排（部分＆＃34;浮动问题＆＃34;解释问题here）。

最后，large-4不在最后一个large-8列，因为large-8列位于HTML之前。

我将用宽度解释它：

您当前的HTML是width: 66.6667% - ＆gt; width: 66.6667% - ＆gt; width: 33.3333%。因为66.66％+ 66.66％> 100％（即比实际屏幕宽），第二个width: 66.6667%被推下。并且width: 33.3333%列无法忽略前一列的存在，因此它也会一直向下推，而不是一直向上推。

要解决此问题，HTML中的顺序应为width: 66.6667% - ＆gt; width: 33.3333% - ＆gt; width: 66.6667%。 66.66 + 33.33＆lt; = 100，所以没关系，＆＃34;我们＆＃34;可以并排，最后一列被推下来。

此外，有一个基础CSS规则浮动到右边的最后一列，你应该覆盖它（就像我在JSFiddle中所做的那样）：

[class*="column"] +[class*="column"]:last-child {
    float: left;
}

在评论后编辑

在小屏幕中将large-4列放在最后是比较棘手的，但您可以使用这样的绝对定位：

@media (max-width: 1026px) {
    .row.bordered {
        position: relative;
        padding-bottom: 46px; /* This is the height of the "Hello" bar! When you add more content and the sidebar gets taller, you should increase this value! */
    }

    .large-4 {
        position: absolute;
        bottom: 0px;
    }
}

检查新的JSFiddle here。

Answer 4

将你的行放在8大。尝试尽可能好地嵌套它们

 <div class="row bordered ">


    <div class="large-8 columns  singleSearchedItem">

        <div class="large-12 columns">
            <!-- Item -->
            <div class="columns large-6  small-6 ">
                <div class="columns large-11 small-11 ">

                    <img src="img/image1.jpg" class="thumbImagesForSearchResults" alt="Alternate Text" />

                </div>
            </div>

            <!-- Car Side Stats -->
            <div class="columns large-6 small-6 ">
                <div class="columns large-12 small-12">
                    <h6 class="carNameForSearch">Mercedes Benz 600 Blue Edition</h6>
                    <hr />
                </div>

                <div class="columns large-12 small-12">
                    <p class="cardetailsPara">Off-road Vehicle/Pickup Truck, Used vehicle, Automatic transmission, Diesel, 190 kW (258 PS), Fuel consumption combined: 6.8 l/100 km</p>
                    <hr />
                </div>

                <div class="columns large-12 small-12">
                    <div class="small-4 columns ">
                        <img src="img/milage.png" /><span class="specText">5423 KMS</span>
                    </div>
                    <div class="small-4 columns">
                        <img src="img/date.png" /><span class="specText">12/2012</span>
                    </div>
                    <div class="small-4 columns"><span class="specText">$33,0000</span></div>
                </div>
            </div>
        </div>





        <div class="large-12 columns">
            <!-- Item -->
            <div class="columns large-6  small-6 ">
                <div class="columns large-11 small-11 ">

                    <img src="img/image1.jpg" class="thumbImagesForSearchResults" alt="Alternate Text" />

                </div>
            </div>

            <!-- Car Side Stats -->
            <div class="columns large-6 small-6 ">
                <div class="columns large-12 small-12">
                    <h6 class="carNameForSearch">Mercedes Benz 600 Blue Edition</h6>
                    <hr />
                </div>

                <div class="columns large-12 small-12">
                    <p class="cardetailsPara">Off-road Vehicle/Pickup Truck, Used vehicle, Automatic transmission, Diesel, 190 kW (258 PS), Fuel consumption combined: 6.8 l/100 km</p>
                    <hr />
                </div>

                <div class="columns large-12 small-12">
                    <div class="small-4 columns ">
                        <img src="img/milage.png" /><span class="specText">5423 KMS</span>
                    </div>
                    <div class="small-4 columns">
                        <img src="img/date.png" /><span class="specText">12/2012</span>
                    </div>
                    <div class="small-4 columns"><span class="specText">$33,0000</span></div>
                </div>
            </div>
        </div>
    </div>



    <!-- Right Search -->
    <div class="large-4 small-12 columns bordered">
        <div class="large-11 large-offset-1 columns bordered">
            <h3>hELLO</h3>


        </div>
    </div>

要正确对齐的列

4 个答案:

在评论后编辑