Question

我目前正在制作一个2x2的响应式网格。但iv意识到在某些屏幕尺寸下，第3个div出现在第4个以下。有人可以告诉我为什么要这样做吗？

 <div class="container">

        <div class="port">
            <div class="columns eight">
            <h3>Example 1</h3>
             <img src= "https://c1.staticflickr.com/1/85/209708058_b5a5fb07a6_z.jpg?zz=1"/>
               <p>Suspendisse nec elit aliquam, ultricies ex rhoncus, dapibus erat. Curabitur faucibus dui hendrerit ex laoreet, at sollicitudin nibh blandit. Suspendisse nec elit aliquam, ultricies ex rhoncus, dapibus erat. Curabitur faucibus dui hendrerit ex laoreet, at sollicitudin nibh blandit.r. Curabitur faucibus dui hendrerit ex laoreet, at sollicitudin nibh blandit.</p>
            </div>
            <div class="columns eight">
            <h3>example 2</h3>
         <img src= "https://c1.staticflickr.com/1/85/209708058_b5a5fb07a6_z.jpg?zz=1"/>
            <p>Suspendisse nec elit aliquam, ultricies ex rhoncus, dapibus erat. Curabitur faucibus dui hendrerit ex laoreet, at sollicitudin nibh blandit. Suspendisse nec elit aliquam, ultricies ex rhoncus, dapibus erat. Curabitur faucibus dui hendrerit ex laoreet, at sollicitudin nibh blandit. </p>
            </div>
            <div class="columns eight">
           <h3>Example 3</h3>
            <img src= "https://c1.staticflickr.com/1/85/209708058_b5a5fb07a6_z.jpg?zz=1"/>
            <p>Suspendisse nec elit aliquam, ultricies ex rhoncus, dapibus erat. Curabitur faucibus dui hendrerit ex laoreet, at sollicitudin nibh blandit. Suspendisse nec elit aliquam, ultricies ex rhoncus, dapibus erat. Curabitur faucibus dui hendrerit ex laoreet, at sollicitudin nibh blandit. </p>
            </div>
            <div class="columns eight">
             <h3>example 4</h3>
            <img src= "https://c1.staticflickr.com/1/85/209708058_b5a5fb07a6_z.jpg?zz=1"/>
            <p>Suspendisse nec elit aliquam, ultricies ex rhoncus, dapibus erat. Curabitur faucibus dui hendrerit ex laoreet, at sollicitudin nibh blandit. Suspendisse nec elit aliquam, ultricies ex rhoncus, dapibus erat. Curabitur faucibus dui hendrerit ex laoreet, at sollicitudin nibh blandit. </p>
            </div>
            </div>

        </div>

http://jsfiddle.net/gdvwsLtt/3/

三江源

Answer 1

如果您将以下代码移到媒体查询之外，以便在较大的屏幕上执行操作，我相信它会按照预期行事：JS Fiddle

.container .port .eight:nth-child(3) {
   clear: both;
}

响应式网格Div出现在错误的位置

1 个答案: