1

コンテナdivにさらに多くのdivが浮かんでいる場合、それらが1つの行に収まらない場合、それらの間に水平に線を引くにはどうすればよいですか？

たとえば、次の場合です。

<div id="main">
  <div id="div1" style="float:left; width: 80px;"></div>
  <div id="div2" style="float:left; width: 80px;"></div>
  <div id="div3" style="float:left; width: 80px;"></div>
</div>

メインdivの「幅」が240ピクセル未満になると、含まれている3つのdivが2行で表示されます。この場合、これら2つの行の間に全長の線を描画します。

4

2 に答える 2

1

divの高さが既知の場合、次のように、「メイン」IDに背景画像を繰り返すのが最善の方法です。

#main {
background-image:url('horizontal_line.gif');
background-repeat:repeat;
}

ただし、トリックは、horizo​​ntal_line.gifの高さをdivユニットの高さよりも高くして、行が1つしかない場合に行が非表示になるようにする必要があることです。

horizo​​ntal_line.gif（またはpng）は、幅が1px、高さが100pxの直線である必要があります。ここで、99pxは透明で、下部の1pxは線の色です（線の太さを1pxになります）。

于 2013-03-20T12:21:05.040 に答える
0

プレーンなcssと異なる高さでそれを行いたい場合は、この方法で行うことができます（ページ構造に応じて、おそらくいくつかの変更を行う必要があります）、実際にいくつかの追加のhtmlコードを追加しますが、何をしたいかによって異なりますこれは、ファストエンドの柔軟なソリューションです。

そのためoverflow: hidden、すべての状況で機能するとは限りません。

css

#main {
    overflow: hidden; //<-- hides the line if the element is in the frist row
}

.line {
    position: relative;
    font-size: 0px;
    top: -1px; //<-- hides the line if the element is in the frist row
    left: 0px;
    width: 240px; //<-- the full width of the line
    border-top: 1px solid black;
}

html

<div id="main">
    <div id="div1" style="float:left; width: 80px;">
        <div class='line'></div>
        aaa<br>aaaaa
    </div>
    <div id="div2" style="float:left; width: 80px;">
        <div class='line'></div>
        aaa<br>aaaaa
    </div>
    <div id="div3" style="float:left; width: 80px;">
        <div class='line'></div>
        aaaa<br>aaaaa<br>aaaaaa
    </div>
</div>
于 2013-03-20T12:43:56.770 に答える