如何使div填充剩余的水平空间？

419

我有2个div：在页面的左侧是一个，在右侧是一个。左侧的一个宽度固定，我希望右侧的一个填充剩余空间。

#search {
  width: 160px;
  height: 25px;
  float: left;
  background-color: #ffffff;
}

#navigation {
  width: 780px;
  float: left;
  background-color: #A53030;
}
<div id="search">Text</div>
<div id="navigation">Navigation</div>
展开摘要

html  css  width  responsive 
— 亚历克斯琴科
source
11
删除#navigation上的width和float属性，它将起作用。
— 约翰·莱诺
— 阿德里安成为
1
@alexchenco：您可能希望将您选择的答案更新为Hank提供的答案
— Adrien Be
@AdrienBe实际上，如果您查看mystrdat的答案，我认为它会更好。这只是css的一行，并且是唯一对我
— 有用的行
@edwardtyl足够公平。实际上，它似乎使用了与我为stackoverflow.com/questions/4873832/…
— Adrien Be

Answers:

71

这似乎可以完成您的目标。

#left {
  float:left;
  width:180px;
  background-color:#ff0000;
}
#right {
  width: 100%;
  background-color:#00FF00;
}
<div>
  <div id="left">
    left
  </div>
  <div id="right">
    right
  </div>
</div>
展开摘要

— 布什利
source
8
您必须删除宽度：尽管如此，还是要在正确的div上去除100％的宽度。
— 约翰·莱诺
250
该解决方案实际上有问题。尝试从LEFT元素中删除颜色。您会注意到RIGHT元素中的颜色实际上隐藏在其下方。内容似乎去了正确的地方，但是正确的div本身却没有。
— Vyrotek
5
+1也解决了我的问题。我了解到，我需要在填充div上删除“ float：left”。我以为那会使页面
— 爆裂
12
也许很高兴注意到Vyroteks的言论是正确的，但可以通过在右列隐藏的溢出来解决。丹泽尔提到了这一点，但他的回答未被接受，因此您可能会错过这一点……
— Ruudt
45
这是完全错误的，右边的元素具有完整大小，只是其内容浮动在左边的元素周围。这不是解决方案，只是更多的混乱。
— mystrdat 2014年
268

我在Boushley的答案中发现的问题是，如果右列比左列长，它将仅环绕左列并恢复填充整个空间。这不是我一直在寻找的行为。在搜索了很多“解决方案”之后，我发现了有关创建三列页面的教程（现在链接已失效）。

作者提供了三种不同的方式，一种固定宽度，一种具有三个可变列，一种具有固定的外部列和中间可变的宽度。比我发现的其他示例更加优雅和有效。大大提高了我对CSS布局的理解。

基本上，在上面的简单情况下，将第一列向左浮动并为其设置固定宽度。然后，在右侧的列中留出一个比第一列稍宽的左边距。而已。做完了 Ala Boushley的代码：

这是Stack Snippets和jsFiddle中的演示

#left {
  float: left;
  width: 180px;
}

#right {
  margin-left: 180px;
}

/* just to highlight divs for example*/
#left { background-color: pink; }
#right { background-color: lightgreen;}
<div id="left">  left  </div>
<div id="right"> right </div>
展开摘要

在Boushley的示例中，左列将另一列保持在右侧。左列结束时，右列将再次开始填充整个空间。在这里，右栏只是简单地与页面对齐，而左栏占据了很大的脂肪余量。无需流相互作用。

— 汉克
source
当您关闭div标签时，该div之后的内容应显示在新行中，但不会发生。你能解释为什么吗？
— fuddin
应为：margin-left：190px；你忘了 ';'。同样，左边距应为180px。
— fuddin
4
注意：如果您想在右侧使用等宽宽度元素，请务必将其放在代码中的第一位，否则无论如何它将被推到下一行。
— Trevor
2
@RoniTovi，浮动元素应该位于html中非浮动元素之前。jsfiddle.net/CSbbM/127
— Hank
6
因此，如果要避免固定宽度，该怎么做？换句话说，允许左列仅根据需要设置宽度，而让右列占用其余部分？
— Patrick Szalapski
126

解决方案来自display属性。

基本上，您需要使两个div像表单元格一样起作用。因此，不必使用float:left，而必须同时display:table-cell在两个div 上使用，并且对于动态宽度div也需要进行设置width:auto;。两个div都应放入具有display:table属性的100％宽度的容器中。

这是CSS：

.container {display:table;width:100%}
#search {
  width: 160px;
  height: 25px;
  display:table-cell;
  background-color: #FFF;
}
#navigation {
  width: auto;
  display:table-cell;
  /*background-color: url('../images/transparent.png') ;*/
  background-color: #A53030;
}

*html #navigation {float:left;}

和HTML：

<div class="container">
   <div id="search"></div>
   <div id="navigation"></div>
</div>

重要说明：对于Internet Explorer，您需要在动态宽度div上指定float属性，否则将不填充空格。

我希望这能解决您的问题。如果需要，您可以阅读我在博客上写的完整文章。

— 米海·弗伦蒂乌（Mihai Frentiu）
source
3
当div内width：auto的内容大于视口中可用空间的其余部分时，此功能不起作用。
— 内森·罗耶
4
@einord，此解决方案不使用表，并且我知道表应仅用于表格数据。所以，这里是没有上下文的。实际的表和display：table（+ other变体）属性是完全不同的东西。
— Mihai Frentiu
1
@Mihai Frentiu，display：table在哪些方面与实际的table元素不同？如果它们是完全不同的东西，我真的很想学习，谢谢。=）
— einord
2
@einord，使用HTML表意味着用HTML代码定义整个表结构。CSS表格模型允许您使几乎任何元素的行为都像表格元素，而无需定义整个表格树。
— Mihai Frentiu
1
@Mihai Frentiu，谢谢您的回答。但是，使用表作为设计元素不是表元素的行为一半吗？
— einord 2013年
123

这些天，您应该使用flexbox方法（可能适用于所有带有浏览器前缀的浏览器）。

.container {
    display: flex;
}

.left {
    width: 180px;
}

.right {
    flex-grow: 1;
}

更多信息：https : //css-tricks.com/snippets/css/a-guide-to-flexbox/

— 约旦
source
有关CSS属性的详细说明，请参见www.w3schools.com/cssref/css3_pr_flex-grow.asp。一个简单的现代解决方案，但可能无法在旧的浏览器中使用。
— 爱德华
4
Flexbox FTW ...我已经在该线程中尝试了所有其他解决方案，但是没有任何效果，我尝试了这个Flexbox解决方案，它马上就可以工作了...经典CSS（即在Flexbox和CSS网格出现之前） ... flex and grid rule :-)
— leo 18'Jul
这应该被接受为当前时间的选定解决方案。而且，它是唯一的“非骇客”解决方案。
— 格雷格
这就像一种魅力，拯救了我的一天！
— lisnb '19
tsbaa（这应该是公认的答案）
— Ryo
104

由于这是一个非常受欢迎的问题，因此我倾向于使用BFC分享一个不错的解决方案。
下面的Codepen样品在这里。

.left {
  float: left;
  width: 100px;
}
.right {
  overflow: auto;
}

在这种情况下，overflow: auto触发上下文行为，并使right元素仅扩展到可用的剩余宽度，如果.left消失，它将自然扩展到全宽。对于许多UI布局而言，这是一个非常有用且干净的技巧，但一开始可能很难理解它的“工作原理”。

— Mystrdat
source
1
浏览器对溢出的支持。IE4 ！！！ w3schools.com/cssref/pr_pos_overflow.asp
— Yevgeniy Afanasyev 2015年
1
有时，我最终在.right元素上使用了无用的水平滚动条。那里是什么问题？
— Patrick Szalapski
1
@PatrickSzalapski可以制作案件的密码笔或类似物品吗？溢出auto可能会触发触发，具体取决于其内容。您还可以使用任何其他溢出值来获得相同的效果，hidden可能会更好地适合您的情况。
— mystrdat
1
BFC代表什么，并且在网络上有一个很好的通用教程来解释BFC？
— lulalala
1
@lulalala它代表块格式化上下文。这里有一个更详尽的解释
— bobo
23

如果您不需要与某些浏览器的旧版本（例如，IE 10 8或更低版本）兼容，则可以使用calc()CSS函数：

#left {
   float:left;
   width:180px;
   background-color:#ff0000;
}

#right {
   float: left;
   width: calc(100% - 180px);
   background-color:#00FF00;
}
— 马科斯·B。
source
1
IE 9及更高版本支持calc属性。此解决方案的唯一问题是，我们可能不知道左列的宽度，否则它会发生变化。
— Arashsoft
好的，此解决方案可能针对灵活的情况，并假设您不知道或不在乎父容器的宽度。在问题中，@ alexchenco说他想填充“剩余空间”，所以...我认为是有效的:)是的，也支持IE 9，谢谢您的注释；）
— Marcos B.
15

@Boushley的答案是最接近的，但是指出了一个未解决的问题。的右格取浏览器的整个宽度; 内容采用预期的宽度。为了更好地看待这个问题：

<html>
<head>
    <style type="text/css">
    * { margin: 0; padding: 0; }
    body {
        height: 100%;
    }
    #left {
        opacity: 0;
        height: inherit;
        float: left;
        width: 180px;
        background: green;
    }
    #right {
        height: inherit;
        background: orange;
    }
    table {
            width: 100%;
            background: red;
    }
    </style>
</head>
<body>
    <div id="left">
        <p>Left</p>
    </div>
    <div id="right">
        <table><tr><td>Hello, World!</td></tr></table>
    </div>
</body>
</html>

http://jsfiddle.net/79hpS/

内容在正确的位置（在Firefox中），但是宽度不正确。当子元素开始继承宽度时（例如，带有width: 100%）时，它们的宽度等于浏览器的宽度，导致它们从页面右侧溢出，并创建水平滚动条（在Firefox中），或者不浮动并向下滑动（镀铬）。

您可以通过添加轻松地解决此问题overflow: hidden到右列来。这样可以为内容和div提供正确的宽度。此外，表格将接收正确的宽度并填充可用的剩余宽度。

我在上面尝试了其他一些解决方案，它们在某些极端情况下无法完全发挥作用，而且过于费力以至于无法修复它们。这有效并且很简单。

如果有任何问题或疑虑，请随时提出。

— 丹泽尔
source
1
overflow: hidden确实解决了这个问题，谢谢。（标记的答案是错误的BTW，因为right实际上占用了父级上的所有可用空间，您在检查元素时可以在所有浏览器中看到此信息）
— huysentruitw 2012年
1
谁能解释为什么这确实起作用？我知道我在这里的某个地方看到了很好的解释，但似乎找不到。
— tomswift 2012年
2
@tomswift设置overflow: hidden将右列放在其自己的块格式设置上下文中。块元素占用了所有可用的水平空间。请参阅：developer.mozilla.org/en-US/docs/Web/Guide/CSS/...
— 约翰Kurlak
该overflow:xxx属性是关键。如您所说，它#right不会在下面扩展#left。它非常巧妙地解决了我使用jQuery UI可调整大小的问题-通过#right将其#left设置为带有溢出属性并将其设置为可调整大小，您将获得一个简单的可移动边界。参见jsfiddle.net/kmbro/khr77h0t。
— kbro 2015年
13

这是一个可接受的解决方案的小修正，它可以防止右列落在左列之下。更换width: 100%;用overflow: hidden;一个棘手的解决方案，如果有人不知道它。

<html>

<head>
    <title>This is My Page's Title</title>
    <style type="text/css">
        #left {
            float: left;
            width: 180px;
            background-color: #ff0000;
        }
        #right {
            overflow: hidden;
            background-color: #00FF00;
        }
    </style>
</head>

<body>
    <div>
        <div id="left">
            left
        </div>
        <div id="right">


right
    </div>
</div>

http://jsfiddle.net/MHeqG/2600/

[edit]还要检查一个三列布局的示例：http : //jsfiddle.net/MHeqG/3148/

— 达里乌斯·西科斯基（Dariusz Sikorski）
source
1
带有固定徽标的灵活导航栏的完美解决方案。
— 干线
5

如果您试图填充Flexbox中2个项目之间的剩余空间，请将以下类添加到要分离的2个项目之间的空div中：

.fill {
  // This fills the remaining space, by using flexbox. 
  flex: 1 1 auto;
}
— 赫尔兹盖特
source
4

采用 display:flex

<div style="width:500px; display:flex">
   <div style="width:150px; height:30px; background:red">fixed width</div>

   <div style="width:100%; height:30px; background:green">remaining</div>
</div>
— 伊尔达·扎里波夫（Ildar Zaripov）
source
1
该答案重复了约旦从2014
— 以来
3

Boushley的答案似乎是使用浮点数进行排列的最佳方法。但是，它并非没有问题。扩展元素内的嵌套浮动将不可用；它将中断页面。

当涉及到扩展元素时，所示方法基本上是“伪造的”-它实际上不是浮动的，它只是与使用其边距的固定宽度的浮动元素一起玩。

那么问题就在于：扩展元素没有浮动。如果您尝试使扩展元素内有任何嵌套的浮动对象，那么那些“嵌套”的浮动对象根本就不会嵌套。当您尝试坚持clear: both;在“嵌套”浮动商品下，最终也会清除顶级浮动商品。

然后，要使用Boushley的解决方案，我想补充一点，您应该放置一个div，如下所示：.fakeFloat {height：100％; 宽度：100％; 向左飘浮; }并将其直接放在扩展的div中；然后，所有扩展div的内容都应放在该fakeFloat元素内。

因此，我建议在这种特定情况下使用表。浮动元素的确不是为了执行您想要的扩展而设计的，而使用表的解决方案却很简单。通常会提出一个论点，即浮动更适合于布局，而不是表格。.但是您无论如何都没有在这里使用浮动，您是在伪造它-这种形式违背了这种形式参数的目的，在这种情况下，我的拙见。

— chinchi11a
source
不要使用表格进行布局。您无法设置它们的高度。它们扩展以容纳其内容，并且不遵守溢出。
— kbro 2015年
@kbro：请勿使用表格进行布局，因为内容和显示应保持分开。但是，如果将内容构造为表格，则可以肯定地将其剪裁overflow: hidden。 jsfiddle.net/dave2/a5jbpc85
— Dave
3

我尝试了上述解决方案来解决左流动问题，并解决了固定权利问题，但没有一项可行（我知道问题是相反的，但我认为这是相关的）。这是起作用的：

.wrapper {margin-right:150px;}
.wrapper .left {float:left; width:100%; margin-right:-150px;}

.right {float:right; width:150px;}

<div class="wrapper"><div class="left"></div></div>
<div class="right"></div>
— 多米尼克
source
3

我有一个类似的问题，我在这里找到了解决方案：https : //stackoverflow.com/a/16909141/3934886

该解决方案适用于固定的中心div和液体侧塔。

.center{
    background:#ddd;
    width: 500px;
    float:left;
}

.left{
    background:#999;
    width: calc(50% - 250px);
    float:left;
}

.right{
    background:#999;
    width: calc(50% - 250px);
    float:right;
}

如果要固定的左列，只需相应地更改公式。

— alex351
source
不可在某些旧的浏览器IE8一样，只有部分对IE9（caniuse.com/#feat=calc）
— 兰迪
2

您可以使用Grid CSS属性，是最清晰，干净和直观的框结构。 

#container{
    display: grid;
    grid-template-columns: 100px auto;
    color:white;
}
#fixed{
  background: red;
  grid-column: 1;
}
#remaining{
  background: green;
  grid-column: 2;
}
<div id="container">
  <div id="fixed">Fixed</div>
  <div id="remaining">Remaining</div>
</div>
展开摘要

— 科尔西
source
1

我不知道，没有人使用position: absolute同position: relative

因此，另一种解决方案是：

的HTML

<header>
  <div id="left"><input type="text"></div>
  <div id="right">Menu1 Menu2 Menu3</div>
</header>

的CSS

header { position: relative;  }
#left {
    width: 160px;
    height: 25px;
}
#right {
    position: absolute;
    top: 0px;
    left: 160px;
    right: 0px;
    height: 25px;
}

jsfiddle示例

— 笨拙的
source
0

/ * * CSS * /

#search {
 position: absolute;
 width: 100px;
}
.right-wrapper {
  display: table;
  width: 100%;
  padding-left:100px;
}
.right-wrapper #navigation {
 display: table-cell;
 background-color: #A53030;
}

/ * * html * /

<div id="search"></div>
<div class="right-wrapper">
   <div id="navigation"></div>
</div>
— user1700099
source
0

我对此有一个非常简单的解决方案！// HTML

<div>
<div id="left">
    left
</div>
<div id="right">
    right
</div>

// CSS

#left {
float:left;
width:50%;
position:relative;
background-color:red;
}
#right {
position:relative;
background-color:#00FF00;}

链接：http：//jsfiddle.net/MHeqG/

— iamatsundere181
source
0

我有一个类似的问题，并提出了以下效果很好的方法

CSS：

.top {
width: auto;
height: 100px;
background-color: black;
border: solid 2px purple;
overflow: hidden;
}
.left {
float:left;
width:100px;
background-color:#ff0000;
padding: 10px;
border: solid 2px black;
}
.right {
width: auto;
background-color:#00FF00;
padding: 10px;
border: solid 2px orange;
overflow: hidden;
}
.content {
margin: auto;
width: 300px;
min-height: 300px;
padding: 10px;
border: dotted 2px gray;
}

HTML：

<div class=top>top </div>
<div>
    <div class="left">left </div>
    <div class="right">
        <div class="content">right </div>
    </div>
</div>

缩小窗口时，此方法不会自动换行，但会自动扩展“内容”区域。站点菜单将保持静态宽度（左）。

对于自动扩展内容框和左垂直框（站点菜单）演示：

https://jsfiddle.net/tidan/332a6qte/

— 提丹
source
0

尝试添加右侧的position relative，remove width和floatproperties，然后添加具有value的leftand right属性0。

另外，您可以添加margin left规则，其值基于左侧元素的宽度（如果需要在它们之间留出空间，则添加一些像素）以保持其位置。

这个例子对我有用：

   #search {
        width: 160px;
        height: 25px;
        float: left;
        background-color: #FFF;
    }

    #navigation {  
        display: block;  
        position: relative;
        left: 0;
        right: 0;
        margin: 0 0 0 166px;             
        background-color: #A53030;
    }
— 有里
source
0 

.container {
  width:100%;
  display:table;
  vertical-align:middle;
}

.left {
  width:100%;
  display:table-cell;
  text-align:center;
}

.right {
  width:40px;
  height:40px;
  display:table-cell;
  float:right;
}
<div class="container">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div
展开摘要

尝试这个。它为我工作。

— Spoorthi
source
0

我已经在这个问题上工作了两天，有一个解决方案可能对您和其他尝试将响应宽度固定为左侧的人都有效，并让右侧填充屏幕的其余部分而不会缠绕在左侧。我假设的目的是使页面在浏览器以及移动设备中都能响应。

这是代码

// Fix the width of the right side to cover the screen when resized
$thePageRefreshed = true;
// The delay time below is needed to insure that the resize happens after the window resize event fires
// In addition the show() helps.  Without this delay the right div may go off screen when browser is refreshed 
setTimeout(function(){
    fixRightSideWidth();
    $('.right_content_container').show(600);
}, 50);

// Capture the window resize event (only fires when you resize the browser).
$( window ).resize(function() {
    fixRightSideWidth();
});

function fixRightSideWidth(){
    $blockWrap = 300; // Point at which you allow the right div to drop below the top div
    $normalRightResize = $( window ).width() - $('.left_navigator_items').width() - 20; // The -20 forces the right block to fall below the left
    if( ($normalRightResize >= $blockWrap) || $thePageRefreshed == true ){
        $('.right_content_container').width( $normalRightResize );
        $('.right_content_container').css("padding-left","0px");
        
        /* Begin test lines these can be deleted */
        $rightrightPosition = $('.right_content_container').css("right");
        $rightleftPosition = $('.right_content_container').css("left");
        $rightwidthPosition = $('.right_content_container').css("width");
        $(".top_title").html('window width: '+$( window ).width()+"&nbsp;"+'width: '+$rightwidthPosition+"&nbsp;"+'right: '+$rightrightPosition);
        /* End test lines these can be deleted */
    
    
    }
    else{
        if( $('.right_content_container').width() > 300 ){
            $('.right_content_container').width(300);
        }
        
        /* Begin test lines these can be deleted */
        $rightrightPosition = $('.right_content_container').css("right");
        $rightleftPosition = $('.right_content_container').css("left");
        $rightwidthPosition = $('.right_content_container').css("width");
        $(".top_title").html('window width: '+$( window ).width()+"&nbsp;"+'width: '+$rightwidthPosition+"&nbsp;"+'right: '+$rightrightPosition);
        /* End test lines these can be deleted */
    
    }
    if( $thePageRefreshed == true ){
        $thePageRefreshed = false;
    }
}
/* NOTE: The html and body settings are needed for full functionality
and they are ignored by jsfiddle so create this exapmle on your web site
*/
html {
    min-width: 310px;
    background: #333;
    min-height:100vh;
}

body{
	background: #333;
	background-color: #333;
	color: white;
    min-height:100vh;
}

.top_title{
  background-color: blue;
  text-align: center;
}

.bottom_content{
	border: 0px;
	height: 100%;
}

.left_right_container * {
    position: relative;
    margin: 0px;
    padding: 0px;
    background: #333 !important;
    background-color: #333 !important;
    display:inline-block;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    font-size: 14px;
    font-weight: 400;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    border-radius: 0;
    box-sizing: content-box;
    transition: none;
}

.left_navigator_item{
	display:inline-block;
	margin-right: 5px;
	margin-bottom: 0px !important;
	width: 100%;
	min-height: 20px !important;
	text-align:center !important;
	margin: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
	vertical-align: top;
}

.left_navigator_items {
    float: left;
    width: 150px;
}

.right_content_container{
    float: right;
    overflow: visible!important;
    width:95%; /* width don't matter jqoery overwrites on refresh */
    display:none;
    right:0px;
}

.span_text{
	background: #eee !important;
	background-color: #eee !important;
	color: black !important;
	padding: 5px;
	margin: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="top_title">Test Title</div>
<div class="bottom_content">
    <div class="left_right_container">
        <div class="left_navigator_items">
            <div class="left_navigator_item">Dashboard</div>
            <div class="left_navigator_item">Calendar</div>
            <div class="left_navigator_item">Calendar Validator</div>
            <div class="left_navigator_item">Bulletin Board Slide Editor</div>
            <div class="left_navigator_item">Bulletin Board Slide Show (Live)</div>
            <div class="left_navigator_item">TV Guide</div>
        </div>
        <div class="right_content_container">
            <div class="span_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper maximus tellus a commodo. Fusce posuere at nisi in venenatis. Sed posuere dui sapien, sit amet facilisis purus maximus sit amet. Proin luctus lectus nec rutrum accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut fermentum lectus consectetur sapien tempus molestie. Donec bibendum pulvinar purus, ac aliquet est commodo sit amet. Duis vel euismod mauris, eu congue ex. In vel arcu vel sem lobortis posuere. Cras in nisi nec urna blandit porta at et nunc. Morbi laoreet consectetur odio ultricies ullamcorper. Suspendisse potenti. Nulla facilisi.

Quisque cursus lobortis molestie. Aliquam ut scelerisque leo. Integer sed sodales lectus, eget varius odio. Nullam nec dapibus lorem. Aenean a mattis velit, ut porta nunc. Phasellus aliquam volutpat molestie. Aliquam tristique purus neque, vitae interdum ante aliquam ut.

Pellentesque quis finibus velit. Fusce ac pulvinar est, in placerat sem. Suspendisse nec nunc id nunc vestibulum hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris id lectus dapibus, tempor nunc non, bibendum nisl. Proin euismod, erat nec aliquet mollis, erat metus convallis nulla, eu tincidunt eros erat a lectus. Vivamus sed mattis neque. In vitae pellentesque mauris. Ut aliquet auctor vulputate. Duis eleifend tincidunt gravida. Sed tincidunt blandit tempor.

Duis pharetra, elit id aliquam placerat, nunc arcu interdum neque, ac luctus odio felis vitae magna. Curabitur commodo finibus suscipit. Maecenas ut risus eget nisl vehicula feugiat. Sed sed bibendum justo. Curabitur in laoreet dolor. Suspendisse eget ligula ac neque ullamcorper blandit. Phasellus sit amet ultricies tellus.

In fringilla, augue sed fringilla accumsan, orci eros laoreet urna, vel aliquam ex nulla in eros. Quisque aliquet nisl et scelerisque vehicula. Curabitur facilisis, nisi non maximus facilisis, augue erat gravida nunc, in tempus massa diam id dolor. Suspendisse dapibus leo vel pretium ultrices. Sed finibus dolor est, sit amet pharetra quam dapibus fermentum. Ut nec risus pharetra, convallis nisl nec, tempor nisl. Vivamus sit amet quam quis dolor dapibus maximus. Suspendisse accumsan sagittis ligula, ut ultricies nisi feugiat pretium. Cras aliquam velit eu venenatis accumsan. Integer imperdiet, eros sit amet dignissim volutpat, tortor enim varius turpis, vel viverra ante mauris at felis. Mauris sed accumsan sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut vel magna commodo, facilisis turpis eu, semper mi. Nulla massa risus, bibendum a magna molestie, gravida maximus nunc.</div>
        </div>
    </div>
</div>
展开摘要

这是我的小提琴，可能对您一样对我有用。 https://jsfiddle.net/Larry_Robertson/62LLjapm/

— 拉里·罗伯森（Larry Robertson）
source
0

物品和容器规则；

Container: {*** display: table; ***}
Items: {*** display: table-cell; width: 100%; ***}

使用空格：nowrap; 用于最后一项中的文本，以确保其不被破坏。

项X％| 项目Y％| 项目Z％

总长度始终= 100％！

如果

Item X=50%
Item Y=10%
Item z=20%

然后

物品X = 70％

X项占主导（表CSS布局中的第一项占主导）！

尝试最大内容；div内部的属性，用于在容器中传播div：

div[class="item"] {
...
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
...

}

— 德米特罗·尤琴科（Dmytro Yurchenko）
source
0

最简单的解决方案是使用边距。这也将有所响应！

<div style="margin-right: auto">left</div>
<div style="margin-left: auto; margin-right:auto">center</div>
<div style="margin-left: auto">right</div>
— 霍比823
source
0

最简单的解决方案是使左div宽度等于100％-右div的宽度加上它们之间的任何边距。 

<div class="cont">
  <div class="search">
    Big Logo Text
  </div>
  <nav>
    <ul class="navbar">
      <li><a href="#1">NavLink1</a></li>
      <li><a href="#2">NavLink2</a></li>
      <li><a href="#3">NavLink3</a></li>
      <li><a href="#4">NavLink4</a></li>
      <li><a href="#5">NavLink5</a></li>
    </ul>
  </nav>
</div>

.cont{
  display: inline-grid;
  grid-template-columns: 160px 10px calc(100% - 170px);
  grid-template-rows: auto;
  grid-template-areas: "search .  navigation";
  width: 100%;
  height: auto;
  text-align: center;
}

.search {
  grid-area: search;
  height: 90px;
  background-color: #00FF00;
  line-height: 80px;
  font-size: 1.4rem;
  font-weight: 600;
}
nav {
  grid-area: navigation;
  height: 90px;
  background-color: #A53030;
}

.navbar{
  display: flex;
  height: 30px;
  width: 100%;
  padding: 0%;
  list-style-type: none;
  flex-flow: row wrap;
  flex: 0 1 auto;
  justify-content: space-between;
  align-content: flex-start;
  align-items: flex-start;
}

.navbar a{
    outline: 0;
    text-decoration: none;
}

https://codepen.io/tamjk/pen/dybqKBN

— 树干
source
-2

我在尝试布局一些jqueryUI控件时遇到了同样的问题。尽管现在的共同理念是“使用DIV代替TABLE ”，但是我发现使用TABLE的效果更好。特别是，如果您需要在两个元素之间进行直接对齐（例如，垂直居中，水平居中等），则TABLE可用的选项为此提供了简单，直观的控件。

这是我的解决方案：

<html>
<head>
  <title>Sample solution for fixed left, variable right layout</title>
  <style type="text/css">
    #controls {
      width: 100%;
    }
    #RightSide {
      background-color:green;
    }
  </style>
</head>

<body>
<div id="controls">
  <table border="0" cellspacing="2" cellpadding="0">
    <TR>
      <TD>
        <button>
FixedWidth
        </button>
      </TD>
      <TD width="99%" ALIGN="CENTER">
        <div id="RightSide">Right</div>
      </TD>
    </TR>
  </table>
</div>
</body>
</html>
— 彼得森
source
9
您永远都不要使用表格来格式化表格数据。永远
— mmmeff
1
表的问题在于，如果您要显示的内容不是表格数据，则标记将产生误导。如果您选择忽略的标记承载意义的原则，你还可回去<font>，<b>等HTML演进过去那种注重减少对演示文稿。
— 维林卡梅尼2014年
4
不知道为什么每个人都讨厌桌子。有时它们很有用。
— Jandieg
您无法固定桌子的高度。如果内容变大，表格也会变大。而且它不兑现overflow。
— kbro 2015年
@Jandieg：请参阅Mihai Frentiu的答案以获取解释。CSS的全部目的是将内容与外观分开。使用属性display:table来实现非表格数据的期望外观是干净的。强制将诸如页面列或表单控件之类的非表格数据放入HTML表中以控制布局是不干净的。
— 戴夫
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.