カスタマイズされたDIVとCSSボックスの作成方法

Question

カスタマイズされたボックスがあります。

私は、ボタンまたはテキストを含むことができるボックスのヘッダーが必要です。 ボックスの左側にイメージボックス、右側にテキストボックスが必要です。 両方のボックスは、同じ高さのである必要があります。

テキストボックスには、buttons, text, links etcを置くことができます。 全体の背景をカスタマイズできる必要があります。

どうすればよいですか？

Answer 1

まず、質問したい人は、実際に質問者が望んでいるものを理解する必要があります。このようなものがあなたが求めているものであることを願っています。

.customizedBox { 
 
\t border: 1px solid #111; 
 
\t width: 500px; 
 
\t height: 400px; 
 
} 
 
.header { 
 
\t background-color: gray; 
 
\t width: 100%; 
 
\t height: 50px; 
 
\t text-align: center; 
 
} 
 
.imageBox { 
 
\t background-color: blue; 
 
\t float: left; 
 
\t width: 50%; 
 
\t height: 350px; 
 
} 
 
.textBox { 
 
\t background-color: green; 
 
\t float: right; 
 
\t width: 50%; 
 
\t height: 350px; 
 
}

<div class="customizedBox"> 
 
    <div class="header">Header 
 
    </div> 
 
    <div class="imageBox">Image Box 
 
    </div> 
 
    <div class="textBox">Text Box 
 
    <button style="display: block;">Button</button> 
 
    <p>Paragraph</p> 
 
    <a href="#">A link</a> 
 
    </div> 
 
</div>