divがCSSでラップされないようにする方法

Web デザインでは、一連の要素を垂直ではなく水平に配置する必要があるシナリオがあります。例えば、表や画像表示を作成する場合、要素を横に並べる必要がある場合が多いのですが、その際に折り返さずに表示するにはdiv cssを使用する必要があります。

1.display:inline-block を使用する

CSS で display:inline-block プロパティを使用すると、div 要素を水平に配置できます。 div要素の表示属性をinline-blockに設定すると、div要素をテキストと同じ左から右の順序で並べることができます。ただし、この方法では親要素で font-size:0; を均一に設定する必要があり、そうしないと div 要素に隙間ができてしまうことに注意してください。

コード例:

<style>
    .parent {
        font-size: 0; /* 必须设置为0，否则会出现空隙 */
    }
    .child {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: red;
        margin-right: 10px;
    }
</style>
<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

2. float:left の使用

改行なしで div CSS 表示を実現するもう 1 つの方法は、float:left 属性を使用することです。 div要素のfloat属性をleftに設定すると、div要素を横に並べることができます。ただし、このメソッドでは親要素の float をクリアする必要があることに注意してください。クリアしないと、親要素の高さが崩れてしまいます。

コード例:

<style>
    .parent {
        overflow: hidden; /* 清除浮动 */
    }
    .child {
        float: left;
        width: 100px;
        height: 100px;
        background-color: red;
        margin-right: 10px;
    }
</style>
<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

3.display:flexを利用する

CSS3では、div要素の横配置を簡単に実現できるdisplay:flex属性が追加されました。親要素の表示属性をflexに設定すると、子要素を自動で配置したり、子要素の順序を調整したりすることができ、非常に柔軟です。

コード例:

<style>
    .parent {
        display: flex;
    }
    .child {
        width: 100px;
        height: 100px;
        background-color: red;
        margin-right: 10px;
    }
</style>
<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

4. 概要

要約すると、display:inline-block、float:left、display:flex およびその他の CSS プロパティを通じてこれを実現できます。 div cssはラップしません。このうち、display:inline-block は下位バージョンのブラウザとの互換性を考慮してよく使用されますが、float:left は互換性の点で非常に安定しています。 Display:flex は最も一般的な方法であり、さまざまな複雑なレイアウトを処理する際に非常に柔軟な役割を果たします。

以上がdivがCSSでラップされないようにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。