Css 列在一行中正确对齐_Css_Zurb Foundation

Css 列在一行中正确对齐

css zurb-foundation

Css 列在一行中正确对齐,css,zurb-foundation,Css,Zurb Foundation,我正在做这个布局，我喜欢大8列和大4列。现在，我在水平重复大8列，就像一个列表一样，但不知何故，大4列和大8列的移位。 hello列会移动。我有一个小提琴在我的个人网站，所以你们可以在这里看一看生活的例子。请告诉我哪里做错了。谢谢谢谢。请尝试下面的布局/代码。还可以在fiddle中共享此代码，以便我们可以帮助您更好地理解您的问题 <div class="row bordered ">  <div class="

我正在做这个布局，我喜欢大8列和大4列。现在，我在水平重复大8列，就像一个列表一样，但不知何故，大4列和大8列的移位。

hello列会移动。 我有一个小提琴在我的个人网站，所以你们可以在这里看一看生活的例子。请告诉我哪里做错了。谢谢

谢谢。

请尝试下面的布局/代码。还可以在fiddle中共享此代码，以便我们可以帮助您更好地理解您的问题

<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>


梅赛德斯本克斯600
你好
梅赛德斯本克斯600

编辑：

可能修复注释，用于调整窗口大小时位于底部的hellodiv

请检查您的CSS@media查询。我觉得这与css类small-6、large-6、small-12有关。这只是在快速查看了您在评论中提供的链接后的一个建议

一行中有两个大的8 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>


梅赛德斯本克斯600
你好
梅赛德斯本克斯600
$（document.foundation（）；

您必须将

large-4

列放在

large-8列之间，如
所以基本上是这样的，large-8
列都是向左浮动的，但是它们的总宽度大于屏幕宽度，所以它们一个接一个地堆叠，而不是并排堆叠（浮动问题部分解释了问题）
最后，large-4
保留最后一个large-8
列，因为large-8
列放在HTML的前面
我将用宽度来解释：
您当前的HTML是宽度：66.6667%
->宽度：66.6667%
->宽度：33.3333%
。因为66.66%+66.66%>100%（即比实际屏幕宽），第二个width:66.6667%
被按下。而宽度：33.3333%
列不能忽略前一列的存在，因此它也保持向下推，而不是一直向上推
要解决此问题，HTML中的顺序应为宽度：66.6667%
->宽度：33.3333%
->宽度：66.6667%
。66.66+33.33把你的行放在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>


梅赛德斯-奔驰600蓝色版

越野车/皮卡车，二手车，自动变速器，柴油机，190千瓦（258马力），总油耗：6.8升/100公里

5423公里
12/2012
$33,0000
梅赛德斯-奔驰600蓝色版

越野车/皮卡车，二手车，自动变速器，柴油机，190千瓦（258马力），总油耗：6.8升/100公里

5423公里
12/2012
$33,0000
你好
@Filly我很困惑。你能给我快速的密码吗。thanks@Filly是的，是的，但是对于小的，Hello栏在中间，但是我希望它在底部。请帮助我。发布一个答案。现在拉乌特人看起来像是扎格人@设计师扎格！？是的，就像第二个car列被移动了一样。向右移动了一点。@DesignerProgrammer刚刚复制了html并检查它们是否正常，列中没有移动。@hirem布局看起来很好，但小尺寸的hello列位于两个car列的中心。我想把它放在底部。
@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;
    }
}

 <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>