容器内的图像和文本对齐

Question

Hello I have created a simple box which will hold text and an image, I need the text aligned left with the image on the right. 您好，我创建了一个简单的框，用于容纳文本和图像，我需要将文本左对齐并在右边对齐图像。 I have set my box height to auto so text will automatically increase the size of the box. 我已将框高度设置为自动，因此文本将自动增加框的大小。 If I float the text and image, the box no longer increases size. 如果我浮动文本和图像，则该框不再增加大小。 In fact the box actually disappears. 实际上，盒子实际上消失了。

Is there any way to have a box that automatically increases size, and have my text and images aligned in css? 有什么办法可以使框自动增加大小，并使文本和图像在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

Put the image before the text and float only it to the right. 将图像放在文本之前，仅将其向右浮动。 Since you float a child element, the parent will collapse and act like it doesn't exist, so you need to add overflow:auto to the parent to restore the behavior that you're after. 由于您浮动了一个子元素，因此父元素将折叠并表现为不存在，因此您需要向父元素添加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 个解决方案

解决方案1
0 已采纳 2015-03-16 02:07:17

容器内的图像和文本对齐

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-03-16 02:07:17

解决方案1
0 已采纳 2015-03-16 02:07:17