Question

我有两个水平对齐的元素。我希望合适的一个具有动态宽度，而左边的一个占用尽可能多的空间。我该怎么做？

或代码

<div class="wrapper">
  <div style="background:red;" class="one">hello</div>
  <div style="background:blue" class="two">dude</div>
</div>

.wrapper > div {
    border: 1px yellow solid;
    display: table-cell;
    height:80px;
}

.one {
    width: 100%;
}

.two {
    width: 100px;
}

Answer 1

＆＃13;

.wrapper {
		 width:100%;
    	height:200px;
    	border:2px solid blue;
	}

.right {
	height:200px;
    width:60%;
    background:red;
    float:right;
}
.left {
	width:auto;
    height:200px;
    background:green;
    
}
}

＆＃13;

<div class="wrapper">
      <div class="right">hello</div>
      <div class="left">dude</div>
 </div>

＆＃13;

你可以将div等水平对齐的两个元素相互对齐，右边的元素可以是动态的，左边的元素可以自动设置自己的宽度。要自动获取宽度，您可以使用width：auto;第一个div的财产。并且第二个div具有百分比或像素的宽度，因此第一个div可以采用剩余宽度并使用float right属性将其设置为正确。我用例子创建了它。

如果更改右边元素的宽度，则左边元素的宽度将自动保留剩余宽度。

你也可以参考

Help with div - make div fit the remaining width

Answer 2

试试这个..

<div class="wrapper">
  <div style="background:red;" class="one">hello</div>
  <div style="background:blue" class="two">dude</div>
</div>

.wrapper > div {
    border: 1px yellow solid;
    display: table-cell;
    height:80px;
}

.one {
    width: 100%;
}

.two {
    width: auto;
}

动态和固定宽度与css

2 个答案: