Html 从中间浮动元素，宽度为%

我正在尝试创建一个布局，其中两个元素从中间开始相邻浮动

我成功地做到了这一点，但只有当两个浮动元素具有固定宽度时

有人知道如何使用宽度为300px的

width进行相同的设置吗。右

和

。左

替换为百分比

---

如果我把

300px

改成

20%

，结构就会失效，元素从左边而不是中间开始。

我不清楚你想做什么，但我怀疑浮动不是办法。这让人感觉flexbox将成为解决方案

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

h1{
保证金：0；
填充：0；
}
.包装纸{
边框：纯红1px；
文本对齐：居中；
}
.集装箱{
边框：纯蓝1px；
显示器：flex；
证明内容：中心；
}
.对,，
.左{
宽度：25%；
边框：绿色实心1px；
}
.对{
文本对齐：左对齐；
}
.左{
文本对齐：右对齐；
}
.清楚{
明确：两者皆有；
}

最高滴度
维韦拉·奥古斯·波尔塔·奥克托。在泰勒斯·里索斯（tellus risus）身上，坐着一只猫。

整数时间误差。多洛前的生命，马萨的矢状生命。

普朗斯特式的脉压节奏。为尊贵的人喝茶。
Vivamus massa lacus，accumsan non的贵宾，libero的lacinia。临时性的，临时性的，临时性的，临时性的，临时性的，临时性的，临时性的，临时性的，临时性的，临时性的，临时性的，临时性的，临时性的，临时性的。

我们要过一个幸福的日子，我们要过一个幸福的日子。马莱苏阿达自由酒店

这就是你的意思吗：

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

---

我想这是因为

。container

display设置为

inline block

，并且没有设置宽度。如果为

.left

和

.right

设置百分比，则百分比与containeng元素相关。将

.container

宽度设置为精确值，您可以设置内部元素的百分比宽度

---

您需要在容器和左/右div之间有另一个div。然后，您可以以百分比形式给出宽度，并在容器上设置边距：0自动

.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

.right、.left{
边框：绿色实心1px；
浮动：左；
宽度：45%；
}
奎斯克
维瓦摩斯
我喜欢这个解决方案，因为它给了我更多的灵活性。但是，safari的前缀似乎不起作用。你有没有可能遇到同样的问题？在Windows上的safari 5.1.7中不起作用我认为这些版本号指的是i/OS版本。由于某些原因，它们不符合windows版本号。5.1.7是windows上的最新版本。Safari不是为windows开发的，因此5是并且将是最新版本…因此flexbox不适用于windows上Safari 5的小用户群。“在任何情况下，你都需要退路。”Pauli_D我在家用我的ipad测试了一下，它确实起了作用。我不知道safari不再是为Windows开发的。
.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