Question

我正在尝试创建一个与此类似的页面： http://bit.ly/1T8xGqP 具体来说，我正在谈论与厨房里的那个人争吵。

正如我所设想的那样，这一行包含一个文本容器和一个封装在行容器中的图像容器。

当窗口变小时，图像似乎移动到文本列后面。

当窗口变大时，文本列会粘在图像列的一侧。图像列始终贴在屏幕的右侧。

我无法创造这样的东西。

这是我的代码：

HTML

<div id="row_container">

    <div id="image_container">
    <img src="images/1297x756_image.jpg" width="1297px" height="756px" border="0" />
    </div>

    <div id="text_container">
    text
    </div>

</div>

CSS

#row_container {    
width: 100%
height: 756px;
background-color:black;
position:relative;
}

#image_container{
width: 1297px;
height: 756px;
background-color:#03C;
position:absolute;
right: 0;
}

#text_container {
width:  383px;
height: 756px;
background-color:blue;
position:absolute;
left:0px;
}

你可以帮我解决这个问题吗？谢谢!!!

Answer 1

您应该浮动图像和文本，避免使用position：absolute。

CSS

#row_container {
  width: 100%;
  height: 756px;
  background-color:black;
  float:right;
  background-color:#03C;
  position:relative;
}
#image_container{
  width: 912px;
  height: 756px;
  background-color:#03C;
  float:right;
  right: 0;
}
#text_container {
  width:   383px;
  height: 756px;
  background-color:blue;
  float:left;
  left:0px;
}

HTML

<div id="row_container">
<div id="image_container">
<img src="http://www.planwallpaper.com/static/images/a601cb579cc9a289bc51cd41d8bcf478_large.jpg" width="100%" height="756px" border="0" />
</div>
<div id="text_container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sodales convallis bibendum. Donec ac elit id diam egestas ultricies. Curabitur porttitor nulla in odio porttitor congue. Ut eu magna justo. Etiam consectetur rutrum porttitor. Nullam tempus sodales volutpat. Sed interdum imperdiet tellus, id semper turpis facilisis vel. Curabitur sed ipsum nec nisl hendrerit viverra in ut felis.</p>
</div>

如果你仍然遇到任何问题，请回来。

CSS Div对齐和定位

1 个答案: