css - 具有 1 个绝对宽度 float 和 1 个相对 float 的相对宽度容器

Question

我已经阅读了很多答案，但不确定为什么它对我不起作用。也许这与父容器不是 100% 有关？事情是......我也尝试过填充，但存在同样的问题。

我也尝试过 container=width:100%，并在 float div 中创建带边距的 10% 空间，但是创建的 10% 比例很奇怪……绝对与页面不成比例。

这是代码。

.container{
width:80%;
overflow:hidden;
margin-right:auto;
margin-left:auto;
}

.side{
width:300px;float:left;}

.main{
position:absolute;  float:left;  }

.clear{clear: both;}

(没有绝对值，两个 div 不再并排...但我看到人们在这里使用 relative ？？？？)

这是html

<div class="container">
  <div class="side"></div>
  <div class="main"></div>
  <div class="clear"></div>
</div>

所以现在的问题是，出于某种原因，div“main”不会填满剩余空间，但里面的文本要么在到达“容器”的边界之前停止，要么根本忽略容器并拉伸(stretch)超出页面...

我想保留两侧的空白边距，并且需要将其中一个 float div 设置为固定宽度...不确定为什么它不起作用

....我觉得有一个简单的解决方案，我只是没有想清楚...

Answer 1

首先，您想要实现的目标不是很清楚。您是否正在尝试重新排列页面上的 HTML 以实现可访问性？

首先，要让 .main 留在 .container 中，将其放入 .container 中:

position:relative;

那么也许你正试图将 main float 到右侧.. 把它放在 .main 中

left:300px;

希望我猜对了你的意图..