嗨,我是 css 新手,我在编码时遇到问题,我的 html 页面中有 4 个 div,我将它们安排为两个在左侧,两个在标题右侧。我的问题是当我重新调整浏览器窗口的大小时,我位于标题右侧的 div 正在向下移动我该如何解决这个问题以及如何将 div 与标题的距离相等..
这是我网站的图像http://postimg.org/image/pg1oay3wl/
请在这里找到我的 html 和 css jsfiddle.net/hmz7g
请帮我解决他的问题......
感谢您的帮助。
嗨,我是 css 新手,我在编码时遇到问题,我的 html 页面中有 4 个 div,我将它们安排为两个在左侧,两个在标题右侧。我的问题是当我重新调整浏览器窗口的大小时,我位于标题右侧的 div 正在向下移动我该如何解决这个问题以及如何将 div 与标题的距离相等..
这是我网站的图像http://postimg.org/image/pg1oay3wl/
请在这里找到我的 html 和 css jsfiddle.net/hmz7g
请帮我解决他的问题......
感谢您的帮助。
在一个 div 中包装多个 div 将解决这个问题。
例如
<div id="wrapper">
<div id="box1" class="left">
</div>
<div id="box2" class="left">
</div>
<div id="box3" class="right">
</div>
<div id="box4" class="right">
</div>
你可以制作一个包含所有盒子的“包装器”div,并使用CSS让所有盒子的“类”向左或向右浮动。
例如
#wrapper{
width:900px;
height:auto;
position:relative;
}
.left{
float:left;
}
.right{
float:right;
}
#box1{
height:50px;
width:50px;
position relative;
background-color:#0F0;
}
#box2{
height:50px;
width:50px;
position relative;
background-color:#00F;
}
#box3{
height:50px;
width:50px;
position relative;
background-color:#C30;
}
#box4{
height:50px;
width:50px;
position relative;
background-color:#90F;
}
我对每个盒子进行了不同的着色,并按照您在上面描述的方式放置了它们。您可以使用我的示例重新调整它们的大小/颜色,以便为您提供更好的主意。
我希望这有帮助。