html - 浏览器调整大小时如何修复HTML div移动

Question

嗨，我是 css 新手，我在编码时遇到问题，我的 html 页面中有 4 个 div，我将它们安排为两个在左侧，两个在标题右侧。我的问题是当我重新调整浏览器窗口的大小时，我位于标题右侧的 div 正在向下移动我该如何解决这个问题以及如何将 div 与标题的距离相等..

这是我网站的图像http://postimg.org/image/pg1oay3wl/

请在这里找到我的 html 和 css jsfiddle.net/hmz7g

请帮我解决他的问题......

感谢您的帮助。

Answer 1

在一个 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;
}

我对每个盒子进行了不同的着色，并按照您在上面描述的方式放置了它们。您可以使用我的示例重新调整它们的大小/颜色，以便为您提供更好的主意。

我希望这有帮助。