-1
私はW3の学校から次の2つの列のレイアウトを取りました。2列のレイアウトを修正しようとしています
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
.column {
width: 100%;
}
}
</style>
</head>
<body>
<h2>Responsive Two Column Layout</h2>
<p>Resize the browser window to see the responsive effect (the columns will stack on top of each other instead of floating next to each other, when the screen is less than 600px wide).</p>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<p>Some text..</p>
</div>
</div>
</body>
</html>そして、それは私が必要なもののために働く、唯一のことは、私は、列の外にテキストを取り、それぞれ下の中央にテキストブロックを持っている必要があるということです。次のようにコードがあります列、それはこのようなものに見えるように：また
をするとき、それが変化するように、私は、1枚の背景画像、及びホバー上の別々の画像を持っているデザインを必要としますカーソルが上に移動します。
ご協力いただければ幸いです。
？列には何かありますか？画像はありますか？設定されるべき高さはありますか？明確にすることはできますか？あなたのコードは本当にうまくいきます...もしテキストが外になければならないならば、それはhtmlの外にもなければなりません！ –
さて、列には画像があります。私は例としてこれを使用しています。私が画像で始める前に、私はその欄の外にあるテキストを取りたいと思いますが、私はそれをやめさせることはできません。 –
これは何か？ https://codepen.io/gc-nomade/pen/vWOvWbイメージは、パッディング（固定値または％/ vh/vw/vminまたはvmax単位）またはhtml内のイメージセットを介して、バックグラウンドおよびリビングルームで設定できます。同じheigtsのcolを描画するには、display：table＆CIE/flexまたはgridを使用する必要があります。 float、inline-xはそれらを並べて配置しません。 –