Question

所以css定位是一个主题，有关于stackoverflow和互联网上的教程的百万问题。然而，我一直发现自己回到研究这个话题，主要是因为它困扰我，我永远找不到我的特定主题的解决方案。

为简单起见，我有一个100％宽度的div标签作为标题，就像这样。

<div style="width: 100%; height: 100px;">

</div>

现在，在这个div里面的屏幕左侧，我有4个包含在容器div中的链接。在屏幕的右侧，我有两个链接，包裹在容器div中。这两个容器div都设置了宽度。中间的其他一切都是空的。

<div style="width: 100%; height: 100px;">

<div style="width: 400px">
<div style="float: left; margin-left: 5px;">link1</div>
<div style="float: left; margin-left: 5px;">link2</div>
<div style="float: left; margin-left: 5px;">link3</div>
<div style="float: left; margin-left: 5px;">link4</div>
</div>

<div style="width: 200px">
<div style="float: left; margin-left: 5px;">link1</div>
<div style="float: left; margin-left: 5px;">link2</div>
</div>

</div>

问题是，我希望这两个固定大小的容器div位于它们所在的流体大小的100％容器的两端。当浏览器调整大小并缩小时，我不希望得到正确的固定容器（1）放在左下方或（2）与左边重叠，我也不想看到滚动条（也就是使用溢出）或使用javascript修复。

当页面继续缩小时，是否没有办法让两个固定大小的容器div相互碰到并保持在那个位置？

Floats不会这样做，我无法得到dislay：inline-block在这种情况下工作。不能做一个大的固定大小的容器div因为我希望宽度为100％。我目前的修复是使用Javascript在页面缩小到一定大小时隐藏正确的链接，但我不喜欢这样做。

在这种情况下，真的没办法解决这个问题吗？

Answer 1

除了在容器div上使用宽度：100％之外，您还必须设置最小宽度为600px。否则，剩下的唯一选项是它们重叠（使用位置：绝对）或相互下降（单独浮动）。根据浏览器的不同，它将以最小宽度停止，或者至少左/右链接将保持不变。

如果需要，您还可以使用CSS媒体查询来显示/隐藏各种宽度的元素。

顺便说一下，最好不要使用这样的内联样式，这样你就可以让事情变得更加灵活。更容易更新。

.outer {
  width: 100%;
  min-width: 600px;
  height: 100px;
  background-color: #555;
}

.leftLinks {
  width: 400px;
  position: absolute;
  float: left;
  background-color: #999;
}

.rightLinks {
  width: 200px;
  position: relative;
  float:right;
  background-color: #999;
}

li {
  float: left;
  display: inline-block;
  margin-left: 5px;
}

<div class="outer">

<div class="leftLinks">
  <ol>
    <li>link1</li>
    <li>link2</li>
    <li>link3</li>
    <li>link4</li>
  </ol>
</div>

<div class="rightLinks">
  <ol>
    <li>link1</li>
    <li>link2</li>
  </ol>
</div>

</div>

Answer 2

灵活的救援箱！

＆＃13;

#wrapper {
  display: flex; /* Magic begins! */
  height: 100px;
  border: 3px solid red;
}
#left {
  width: 400px; /* Desired width. Will be less is the window is narrow */
  border: 3px solid blue;
}
#right {
  width: 200px;  /* Desired width. Will be less is the window is narrow */
  margin-left: auto; /* Push it to the right */
  border: 3px solid green;
}
#wrapper > div > div { /* Unrelated styles */
  float: left;
  margin-left: 5px;
}

＆＃13;

<div id="wrapper">
  <div id="left">
    <div>link1</div>
    <div>link2</div>
    <div>link3</div>
    <div>link4</div>
  </div>
  <div id="right">
    <div>link1</div>
    <div>link2</div>
  </div>
</div>

＆＃13;

使用标题将两个元素定位在100％的相对两端

2 个答案: