blocks|key|1056890|text|一种方法是使用flexbox，如下例所示:右侧列不允许宽度增长，左侧列具有百分比宽度(根据需要更改宽度)和最大宽度，两者一起由justify-content:+center居中|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1056891|(我不清楚左侧容器的100%25宽度:您希望两个容器都居中，如果宽度确实是100%25，这将是无关紧要的。当然，您也可以将其设置为100%25，并且只有最大宽度限制)|1056892|​|1056893|.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%25;
++border:1px+solid+green;
}|code-block|syntax|javascript|1056894|<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>|1056895|1056896|在评论后添加：|1056897|这是一个针对较老浏览器的附加浮点解决方案。重要的一点是，你必须对容器和右侧使用相同的背景，因为右列不会延伸到整个高度。不过，如果你的初始高度小于窗口高度，它不会填满页面，看起来也不会那么好……|1056898|1056899|html,
body+{
++margin:+0;
}

body+{
++min-height:+100%25;
}

.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%25+-+50px);
++background:+#fc9;
}|1056900|<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">
++++<p>Yeah</p>
++</div>
</div>|1056901|1056902|entityMap^0|1R|N|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|16|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|17|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|18|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|19|8|@]|D|@]|E|$M|N]]|$1|Q|3|I|5|6|7|1A|8|@]|D|@]|E|$]]|$1|R|3|S|5|6|7|1B|8|@]|D|@]|E|$]]|$1|T|3|U|5|6|7|1C|8|@]|D|@]|E|$]]|$1|V|3|I|5|6|7|1D|8|@]|D|@]|E|$]]|$1|W|3|X|5|L|7|1E|8|@]|D|@]|E|$M|N]]|$1|Y|3|Z|5|L|7|1F|8|@]|D|@]|E|$M|N]]|$1|10|3|I|5|6|7|1G|8|@]|D|@]|E|$]]|$1|11|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]]|12|$]]

<p>One way is to use flexbox as in the example below: The right column is not allowed to grow in width, the left has a percentage width (change taht as needed) and a max-width, both together are centered by <code>justify-content: center</code></p>

<p>(Your 100% width for the left container was unclear to me: You want both centered, which would be irrelevant if the width were really 100%. Still , you can of course set it to 100% and only have the max-width limit)</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  &lt;div class="left"&gt;
    &lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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,&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="right"&gt;
    Yeah
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>ADDED AFTER COMMENT:</p>

<p>Here is an additional solution with floats for older browsers. One essential thing is that you have to use the same background for container and right, since the right column won't extend across the whole height. Still, if your initial height is less than the window height, it won't fill the page and that will not look that good...</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  &lt;div class="left"&gt;
    &lt;p&gt;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.&lt;/p&gt;

    &lt;p&gt;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.&lt;/p&gt;

    &lt;p&gt;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.&lt;/p&gt;

    &lt;p&gt;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,&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="right"&gt;
    &lt;p&gt;Yeah&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1089459|text|您可以在.left上使用calc()：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1089460|width:+calc(100%25+-+50px+-+8px);|code-block|syntax|javascript|1089461|100%25是您想要的默认值；50px是减去.right大小。8px是一些边框、填充、边距。因此，我还会在您的代码中添加padding:+0；和Hence+:+0；。|1089462|完整代码：|1089463|.container
{
++border:+1px+solid+red;
++text-align:+center;
++display:inline-block;
++width:+100%25;
++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%25+-+50px+-+8px);
++display:+inline-block;
++border:+1px+solid+black;
++padding:+0;
++margin:+0;
}|1089464|如果你想改变任何填充或magin，不要忘记增加-8px；|1089465|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>You can use calc() on .left:</p>

<pre><code>width: calc(100% - 50px - 8px);
</code></pre>

<p>The 100% is the default you wanted; 50px is substracting the .right size. The 8px is some borders, paddings, margins. Hence, I would also add padding: 0; and margin: 0; to your code.</p>

<p>Full code:</p>

<pre><code>.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;
}
</code></pre>

<p>If you want to change any padding or magin, do not forget to increase the -8px;</p>


<p>I am trying to create a simple layout where it is filled width in the left div, with a max-width, and fixed width in the right div.</p>

<p>These divs are centered in a container.</p>

<p>If the max-width of the left div is hit, everything obviously works as intended. However, on a mobile phone, this functionality does not work as intended, and the left div would take up an entire row, forcing the right div onto a second line.</p>

<p>What is the correct way to solve this issue?</p>

<p>Here is the JS fiddle: <a href="https://jsfiddle.net/Lozqg9ya/" rel="nofollow noreferrer">https://jsfiddle.net/Lozqg9ya/</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  &lt;div class="left"&gt;
    Here we are
  &lt;/div&gt;
  &lt;div class="right"&gt;
    Yeah
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


Creating a 100% width left, fixed width right, centered in container

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我正在尝试创建一个简单的布局，在左侧div中填充宽度，在右侧div中填充最大宽度和固定宽度。这些div在容器中居中。如果命中了左侧div的最大宽度，显然一切都会按预期运行。但是，在移动电话上，此功能不能按预期工作，左div将占据整行，迫使右div放在第二行。解决这个问题的正确方法是什么？这就是JS小提琴：​.conta...

问创建一个100%宽度的左边，固定宽度右边，居中的容器
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问创建一个100%宽度的左边，固定宽度右边，居中的容器EN