如何使 div 填充剩余的水平空间? [英] How to make a div fill a remaining horizontal space?

问题描述

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

#search {宽度:160px；高度:25px；向左飘浮;背景色:#ffffff；}#导航 {宽度:780px；向左飘浮;背景颜色:#A53030；}

<div id="search">Text</div><div id="navigation">导航</div>

解决方案

这似乎可以实现您的目标.

#left {向左飘浮;宽度:180px；背景色:#ff0000；}#对 {宽度:100%；背景色:#00FF00；}

<div id="左">剩下
<div id="右">对

I have 2 divs: one in the left side and one in the right side of my page. The one in the left side has fixed width and I want the one of the right side to fill the remaining space.

#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>

解决方案

This seems to accomplish what you're going for.

#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>

这篇关于如何使 div 填充剩余的水平空间?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！