Question

你好我已经创建了一个简单的框，它将保存文本和图像，我需要左边的文本与右边的图像对齐。我已将盒子高度设置为自动，因此文本会自动增加盒子的大小。如果我浮动文本和图像，框不再增加大小。事实上，这个盒子实际上已经消失了。

有没有办法让一个盒子自动增加尺寸，让我的文字和图像在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;
}

Answer 1

将图像放在文本之前，只将其向右浮动。由于您浮动了一个子元素，因此父元素将崩溃并表现得像它不存在一样，因此您需要将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>

容器内的图像和文本对齐

1 个答案: