CSS：レスキューレイアウトは、（数学的に）それほど動作しません。

Question

私は3列のレイアウトをしています。

画面の幅が1025pxより小さくなると、大きな画面で互いに並べられた3つの列が重ねて表示されます。

左列の内容である順序付けられていないリストは、（垂直ではなく）水平に並べられるようになります。

親divの幅が800pxになりました。マージン、ボーダー、パディングなし。 子要素であるulは、これらの幅を継承します。

私は、（4つの）li要素に25％の幅を与え、これは200pxになります。そのことは開発者向けのツールで見ることができます。

しかし、4つのリスト項目は1つの行にとどまっていません。最後の項目は別の行に分割されます。

現在、私はない理由を見ることはできません。 4 * 200px = 800px =>親要素に一致する必要があります。

私が行うことができます：

ul li { 
    ... 
    width: calc(25% - 4px); 
    ... 
} 

...それが働くだろう。しかし、そこで...というアプローチを取ること

を望んでいない：それは一致している必要がありますが、私はこれらの改行を取得する理由

を誰かが私に言うことはできますか？

$rad: 10px; 
 

 
.content h2 { 
 
    margin-top: 20px; 
 
} 
 

 
.content { 
 
background-color: #343434; 
 
color: white; 
 
width: 60%; 
 
} 
 

 
.wrap { 
 
    max-width: 800px; 
 
    margin: 50px auto; 
 
    display: flex; 
 
} 
 

 
.left-column { 
 
    background-color: #dedede; 
 
    width: 10%; 
 
} 
 

 
.right-column { 
 
    background-color: lighten(grey, 10%); 
 
    width: 30%; 
 
} 
 

 
.column { 
 
    padding: 0 25px; 
 
    border-radius: $rad; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
    padding-left: 0; 
 
} 
 

 
@media (max-width: 1024px) { 
 
    .wrap { 
 
    flex-direction: column; 
 
    } 
 
    
 
    .content { 
 
    width: 100%; 
 
    order: 3; 
 
    } 
 
    
 
    .left-column { 
 
    width: 100%; 
 
    order: 1; 
 
    } 
 
    
 
    .right-column { 
 
    width: 100%; 
 
    order: 2; 
 
    } 
 
    
 
    ul li { 
 
    display: inline-block; 
 
    background-color: #efefef; 
 
    width: 25%; 
 
    text-align: center; 
 
    border-radius: $rad; 
 
    } 
 
}

<div class="wrap"> 
 
    <div class="left-column column"> 
 
    <ul> 
 
     <li>One</li> 
 
     <li>Two</li> 
 
     <li>Three</li> 
 
     <li>Four</li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="content column"> 
 
    <h2>Nam quam nunc blandit vel</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p> 
 
    <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p> 
 
    <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p> 
 
    </div> 
 

 
    <div class="right-column column"> 
 
    <p>RIGHT COLUMN - Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p> 
 
    <p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.</p> 
 
    </div> 
 
</div>

Answer 1

あなたは<li>要素にfloatを設定することで、この問題を解決することができます

は、ここでは、コードです。これは彼らに「互いに隣に浮かぶ」と言うでしょう。

ul li { 
    float: left; 
    background-color: #efefef; 
    width: 25%; 
    text-align: center; 
    border-radius: $rad; 
}