html - HTML で重なっているボックスを修正する方法

Question

私は自分のビデオの Web サイトを作成しており、ビデオのサムネイルに似た写真を設定しています。「行」ごとに 2 つの写真が必要です。しかし、これは次のようになります。

私が「描いた」ボックスのそれぞれは、絵と少しのテキストが入ったボックスです。

CSSは次のとおりです。

#videoList{
width: 480px;
margin: 15px;
background: #DBDBDC;
float: left;
clear: both;
text-align: center;
text-indent: 20px;
}
#videoList2{
width: 480px;
margin: 15px;
background: #DBDBDC;
float: right;
clear: both;
text-align: center;
text-indent: 20px;
}

これはHTMLです：

<div id="videoList">
                <p>
                <a href="something.html">video title</a>
                </p>
                <img src="images/img.jpeg" />
            </div>

<div id="videoList2">
                <p>
                <a href="something.html">video title</a>
                </p>
                <img src="images/img.jpeg" />
            </div>

2 つのボックスをオンラインにするためにできることはありますか?

score 0 · Accepted Answer

これを試してください：CSS>>>

#videoList{
width: 480px;
margin: 15px;
background: #DBDBDC;
float: left;
text-align: center;
text-indent: 20px;
}

#videoList2{
width: 480px;
margin: 15px;
background: #DBDBDC;
float: left;
text-align: center;
text-indent: 20px;
}
#videoContainer{width: 1020px; height: 300px; background-color: pink}

`

これはHTMLです：

<div id="videoContainer">
    <div id="videoList">
     <p>
         <a href="something.html">video title</a>
     </p>
     <img src="images/img.jpeg" />
    </div>

   <div id="videoList2">
    <p>
     <a href="something.html">video title</a>
    </p>
    <img src="images/img.jpeg" />
   </div>  
</div>

score 0 · Accepted Answer

これは、2 つのボックスが同じ行に収まるのに十分な大きさのウィンドウがあれば機能します。

<div id="videoList">
            <p>
            <a href="something.html">video title</a>
            </p>
            <img src="images/img.jpeg" />
        </div>
<div id="videoList">
            <p>
            <a href="something.html">video title</a>
            </p>
            <img src="images/img.jpeg" />
        </div>

CSS:

    #videoList{
       display: block-inline;
       width: 480px;
       margin: 15px;
       background: #DBDBDC;
       float: left;
       text-align: center;
       text-indent: 20px;
       }

「display: block-inline;」を追加しました。「クリア：両方;」を削除しました「クリア: 両方;」"float" に似ていますが、下に押し込む傾向があります

表示: ブロックインライン; 物事をテキストとして動作させることと関係があり、テキストはページの下ではなくページ全体に表示されます。

html - HTML で重なっているボックスを修正する方法

2 に答える 2

Related

Reference