使用css的动态和固定宽度答案

【问题标题】：dynamic and fixed width with css使用css的动态和固定宽度
【发布时间】：2015-01-03 23:51:27
【问题描述】：

我有两个水平对齐的元素。我希望右侧具有动态宽度，左侧占用与左侧一样多的空间。我该怎么做？

或代码

<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;
}

【问题讨论】：

检查布局here，为您this one，或其他解决方案。

标签： html css

【解决方案1】：

.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;
    
}
}

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

您可以将两个元素（如 div）彼此水平对齐，右元素可以是动态的，而左元素会自动设置其宽度。要自动获取宽度，您可以使用 width:auto;第一个 div 的属性。第二个 div 有一定的百分比或像素宽度，所以第一个 div 可以使用剩余的宽度并使用 float right 属性设置它。我已经用示例创建了它。

如果你改变右边元素的宽度，那么左边元素的宽度会自动取剩余宽度。

你也可以参考

Help with div - make div fit the remaining width

【讨论】：

【解决方案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;
}

【讨论】：