html - 动态和固定宽度与CSS

Question

我有两个水平对齐的元素。 我希望右边的宽度具有动态宽度，而左边的宽度尽可能多地占据剩余空间。我该怎么做？

Selenium JSFiddle

或代码

<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

.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