Question

我正在尝试创建一个简单的布局，它在左边div中填充宽度，最大宽度和右边div中的固定宽度。

这些div以容器为中心。

如果击中左侧div的最大宽度，一切显然都按预期工作。但是，在移动电话上，此功能无法正常工作，左侧div占用整行，迫使右侧div进入第二行。

解决此问题的正确方法是什么？

.container {
  margin: auto;
  border: 1px solid black;
  text-align: center;
  display: inline-block;
  width: 100%;
}

.right {
  width: 50px;
  display: inline-block;
  border: 1px solid black;
}

.left {
  max-width: 1500px;
  width: 100%;
  display: inline-block;
  border: 1px solid black;
}

<div class="container">
  <div class="left">
    Here we are
  </div>
  <div class="right">
    Yeah
  </div>
</div>

Answer 1

一种方法是使用flexbox，如下例所示：右边的列不允许增加宽度，左边有一个百分比宽度（根据需要更改taht）和最大宽度，两者一起以{为中心{1}}

（左边容器的100％宽度对我来说不清楚：你想要两者都居中，如果宽度真的是100％则无关紧要。但是，你当然可以将它设置为100％并且只有最大值 - 宽度限制）

＆＃13;

justify-content: center

＆＃13;

.container
{
  display:flex;
  justify-content: center;
  border:1px solid blue;
}
.right
{
  width:50px;
  flex-grow: 0;
  border:1px solid red;
}
.left
{
  max-width:1500px;
  width: 75%;
  border:1px solid green;
}

＆＃13;

评论后添加：

这是针对旧浏览器的浮动的附加解决方案。一个重要的事情是你必须使用相同的背景容器和右边，因为右列不会延伸到整个高度。尽管如此，如果您的初始高度低于窗口高度，它将无法填充页面，这看起来不会那么好......

＆＃13;

<div class="container">
  <div class="left">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>

<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>

<p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.</p>

<p>Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
  </div>
  <div class="right">
    Yeah
  </div>
</div>

＆＃13;

html,
body {
  margin: 0;
}

body {
  min-height: 100%;
}

.container {
  border: 1px solid blue;
  overflow: auto;
  background: #9cf;
}

.right {
  float: right;
  width: 50px;
  background: #9cf;
}

.left {
  float: left;
  max-width: 1500px;
  width: calc(100% - 50px);
  background: #fc9;
}

＆＃13;

Answer 2

您可以在.left上使用calc（）：

width: calc(100% - 50px - 8px);

100％是您想要的默认值; 50px正在减去.right尺寸。 8px是一些边框，填充，边距。因此，我还要添加填充：0;和保证金：0;你的代码。

完整代码：

.container
{
  border: 1px solid red;
  text-align: center;
  display:inline-block;
  width: 100%;
  padding: 0;
  margin: 0;
}
.right
{
  width: 50px;
  display: inline-block;
  border: 1px solid green;
  padding: 0;
  margin: 0;
}
.left
{
  max-width: 1500px;
  width: calc(100% - 50px - 8px);
  display: inline-block;
  border: 1px solid black;
  padding: 0;
  margin: 0;
}

如果你想改变任何填充或magin，别忘了增加-8px;

创建一个100％宽度左，固定宽度右，以容器为中心

2 个答案: