将右浮动div扩展到左侧

时间:2014-05-05 01:23:17

标签: html css

我正在尝试将右浮动div扩展到左侧。 我有一个图像,并希望在图像的右侧放置一些文字。 编辑 目标是该网站保持动态。所以我不能使用固定宽度。 一种方法是使用Javascript,我想但我更愿意在HTML CSS中尽可能这样做。

这是我的照片 current design 这是我希望拥有的图片 design goal

如何将右侧div扩展到左侧? 或者我应该在中间使用div?

这是HTML

<div id="logo_container">
    <div id="logo_image">
    <img src="../img/KI_Logo_Long_FINAL.png" width="439" height="150" alt="KI-consult logo rectangle"> 
    </div> <!-- div id="logo_image" -->
    <div id="logo_address" height="150">
    test<br>address 1 <br>address2
    </div> <!-- div id="logo_address" -->
</div>  <!-- div id="logo_container" -->

和CSS

#logo_container

{
padding: 0px; 
overflow: hidden; 
zoom: 1;

}


#logo_image

{
float: left;
background-color: transparent;
border: 1px solid red;

}


#logo_address

{
background-color: #0E4194;
color: #FFFFFF;
margin-left: auto; 
padding: 0px; 
float: right;
border: 1px solid red;
height: 150px;

}

2 个答案:

答案 0 :(得分:0)

#logo_address
{
background-color: #0E4194;
color: #FFFFFF;
padding: 0px; 
textalign: right;
float: left;
border: 1px solid red;
height: 150px;
width: ENTER VALUE HERE;
}

这将是一个解决方案。如果将#logo_address浮动到左侧,请将文本向右对齐并输入您想要的宽度值。

答案 1 :(得分:0)

您需要将背景颜色设置为#logo_container而不是#logo_address。这将为整个包装器div提供背景颜色,包括两个子元素之间的空间。