0
私はそれらの中に画像を持つ2つのdivブロックを持っていて、私はそれらが互いに正しく整列していますが、私はそれらを左に揃えています。私はそれらを中心に整列させようとしましたが、それらはお互いの上に終わります。私はそれらの周りにブロックを作成し、それを中心にする必要がありますか？ display: inline-blockにどのように2つの浮動要素を互いに隣合うように配置しますか？
body {
background-color: #C8C8C8;
background-image: images/rottenlargebg.png;
}
h1 {
text-shadow: 2px 3px gray;
margin-left: auto;
margin-right: auto;
width: 200px;
}
img.width {
width: 100%;
}
img.tLeft {
float: left;
padding-right: 3em;
}
img.tRight {
float: right;
}
.div1 {
width: 50%;
border-top-left-radius: 20px;
overflow: hidden;
background-image: url(images/rottenlargebg.png);
background-repeat: repeat-x;
float: left;
}
.div2 {
display: block;
overflow: hidden;
border-top-right-radius: 20px;
float: left;
}
.div3 {
width: 50%;
border: 1px solid red;
overflow: hidden;
border-top-right-radius: 20px;
float: left;
}
strong {
font-size: 70px;
color: red;
}<!DOCTYPE html>
<html>
<head>
<title>TMNT - Rancid Tomatoes</title>
<link rel="stylesheet" href="movie.css">
<meta charset="utf-8" />
</head>
<body>
<div>
<img class="width" src="images/rancidbanner.png" alt="Rancid Tomatoes">
</div>
<h1>TMNT (2015)</h1>
<!---block one--->
<div class="div1">
<img class="tLeft" src="images/rottenlarge.png" alt="Rotten" /> <strong>33%</strong>
</div>
<!--block two-->
<div class="div2">
<img class="tRight" src="images/overview.png" alt="general overview" />
</div>
</html>
はいそれはあなたがしなければならないものです。XD –
ようこそ！あなたのコードを直接（最小、完全で、検証可能な例）に煮詰めてください。[stackoverflow.com/help/mcve] - あなたの質問を直接的にターゲットにするのに役立ちます。あなたの問題をより早く評価できるほど、答えを得る:)（fwiw、この場合、私の最初の質問はなぜ 'float'なのだろう？） – henry
はい、'私はそれらの周りにブロックを作って、おそらく '中心に置くべきでしょうか？ –