Question

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

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

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

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

感谢您的帮助。

Answer 1

在div中包装多个div将解决此问题。

E.g。

    <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将所有方框的'class'向左或向右浮动。

E.g。

    #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;
}

我为每个盒子涂上了不同的颜色，并将它们定位为您在上面描述的内容。您可以使用我的示例重新调整大小/着色它们，以便为您提供更好的主意。

我希望这会有所帮助。

如何修复浏览器调整大小时移动的Html div

1 个答案: