Question

我正在尝试创建一个布局，其中两个元素浮动在彼此旁边，来自中间。

我设法做到这一点，但只有当两个浮动元素有一个固定的宽度时。

是否有人知道如何使用width: 300px;对.right和.left取代百分比进行同样的设置？

如果我将300px更改为20%，则结构会失败，元素会从左边开始而不是从中间开始。

Answer 1

我不清楚你要做什么，但我怀疑漂浮不是那样的。感觉就像flexbox将成为解决方案。

.container {
    border: solid blue 1px;
    display:flex;
    justify-content:center;
}
.right, .left {
    width: 25%;
    border: green solid 1px;
}

＆＃13;

h1 {
  margin: 0;
  padding: 0;
}
.wrapper {
  border: solid red 1px;
  text-align: center;
}
.container {
  border: solid blue 1px;
  display: flex;
  justify-content: center;
}
.right,
.left {
  width: 25%;
  border: green solid 1px;
}
.right {
  text-align: left;
}
.left {
  text-align: right;
}
.clear {
  clear: both;
}

＆＃13;

<div class="wrapper">
  <h1>Top titel</h1>
  <div class="container">
    <div class="left">
      Quisque viverra ac augue porta auctor. Fusce sollicitudin tellus risus, sit amet commodo felis tristique in.
      <br/>Integer tempor ultricies eleifend. Vivamus id pretium dolor, vitae sagittis massa.
      <br/>Pellentesque pulvinar neque interdum dolor pulvinar tempus. Nullam congue tempus dignissim.
    </div>
    <div class="right">
      Vivamus massa lacus, dignissim ac accumsan non, lacinia in libero. Nullam tempor, velit nec fringilla feugiat, arcu libero viverra nibh, ullamcorper ultricies ante felis non risus.
      <br/>Vivamus feugiat augue nec tellus sodales interdum. Suspendisse ac libero malesuada
    </div>
    <div class="clear"></div>
  </div>
</div>

＆＃13;

Answer 2

你需要在容器和左/右div之间有另一个div。然后，您可以将宽度设置为百分比，并在容器上使用margin：0 auto。

.right, .left {
    border: green solid 1px;
    float: left;
    width: 45%;
}
<div class="container" >
    <div style="width: 60%;margin: 0 auto;height: 200px">
        <div class="left">
           Quisque
        </div>
        <div class="right">
           Vivamus
        </div>
    </div>
</div

检查一下： http://jsfiddle.net/z6s1ddnx/1/

Answer 3

这是你的意思：https://jsfiddle.net/anjalysaju123/5pypkfky

css是：

h1 {
margin: 0;
padding: 0;
}
.wrapper {
border: solid red 1px;
width: 100%;
height: 100%;
text-align: center;
}
.container {
border: solid blue 1px;
display: inline-block;
}
.right, .left {
border: green solid 1px;
float: left;
width: 49%;
}
.right {
text-align: left;

}
.left {
text-align: right;

}
.clear {
clear: both;
}

Answer 4

我认为这是因为.container显示设置为inline-block并且没有设置宽度。如果您设置.left和.right的百分比 - 百分比与containeng元素相关。将.container宽度设置为精确值，您可以设置内部元素的百分比宽度。 http://jsfiddle.net/q7uey80L/5/

.container {
    border: solid blue 1px;
    display: inline-block;
    width: 500px;
}
.right, .left {
    border: green solid 1px;
    float: left;
    width: 30%;
}

中间浮动元素，宽度为％

4 个答案: