你好，我已经创建了一个简单的盒子来容纳文本和图像，我需要将文本与右侧的图像左对齐。我已将我的框高度设置为自动，因此文本会自动增加框的大小。如果我 float 文本和图像，框不再增加大小。事实上，盒子实际上消失了。
有什么方法可以让框自动增加大小，并让我的文本和图像在 css 中对齐？
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Kawasaki Motorcycle Club UK</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="wrapper">
<header>
</header>
<nav>
<ul class="main_menu">
<li><a href="bikes.html">BIKES</a></li>
<li><a href="news.html">NEWS</a></li>
<li><a href="events.html">EVENTS</a></li>
<li><a href="join.html">JOIN</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</nav>
</div>
<div id="box">
<div id="text">
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
<div id="image">
<img src="mybike.jpg"/>
</div>
</div>
</div>
</body>
#box {
width: 1000px;
height: auto;
margin: 0 auto;
background-color: #383131;
border-radius: 5px;
}
#text {
text-align: left;
color: #FFF;
}
#image {
text-align: right;
}
最佳答案
将图像放在文本之前，并仅将其 float 到右侧。由于您 float 了一个子元素，父元素将崩溃并表现得好像它不存在一样，因此您需要将 overflow:auto 添加到父元素以恢复您想要的行为。
#box {
width: 1000px;
margin: 0 auto;
background-color: #383131;
border-radius: 5px;
overflow:auto;
}
#text {
color: #FFF;
}
#image {
float: right;
}<div id="box">
<div id="image">
<img src="http://www.placehold.it/100x100" />
</div>
<div id="text">CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT</div>
</div>关于html - 容器内的图像和文本对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29068301/