Question

我有这个HTML

  <body>

    <div id="onlineBookingDiv" style="float: right; position:fixed; right:0px; width:40%">
  //content here    
</div>
    <div class="zumaContent" id="zumaContent">
//content here    
</div>

    </body>

第一个位于右侧，但第二个位于左上角，位于左侧。

我想在左上角制作第二个

我希望你能帮我，如果没有，请告诉我拍照

Answer 1

在HTML中，您可以制作2个div并提供一个CSS属性float:left，并为另一个提供float:right。并清除浮动，你给它overflow:hidden父div或一个额外的div元素浮动（空）与clear:both CSS属性，这将使布局不会流出流

检查 Demo 。

div{height:200px; width:200px; border:1px solid gray}
.one{float:left;}
.two{float:right;}

<div class="one"></div>
<div class="two"></div>

Answer 2

如果我找对你，这就是你需要的：

<强> CSS：

`.boxWrapper{
    display: inline-block;
    width: 100%;
}
#onlineBookingDiv
{
    float: right;
    text-align:center;
    width:40%;
    background-color: #ccc;
}
#zumaContent{
    float: left;
    text-align:center;
    width:40%;
    background-color: #eee;
}`

<强> HTML：

<div class="boxWrapper"> <div id="onlineBookingDiv">BOX 1</div> <div class="zumaContent" id="zumaContent">BOX 2</div> </div>

请见 E X A M P L E

Answer 3

在您的示例中，您在一个元素上使用固定定位。固定定位元件将使其相对于文档粘住。因此，你的其他元素不是正常的。这完全取决于你是否想要这种行为？否则，请参阅其他答案。

http://jsfiddle.net/pP3YE/

#onlineBookingDiv {
    position:fixed; 
    right:0; 
    width:40%;
    background: red;
}
.zumaContent {
    position:fixed;
    width:40%;
    background: green;
}

如何使这两个div左右

我希望你能帮我，如果没有，请告诉我拍照

3 个答案: