Question

在占据#content其余宽度的同时，如何使#menu坐在#container旁边；

<div id="container">

    <div id="menu">
    </div>

    <div id="content">
    </div>

</div>

注意：我需要#menu具有200px的固定宽度

https://jsfiddle.net/h5z8yowL/1/

Answer 1

您可以在CSS中使用 calc（）函数。

#container { width:100%; }
#menu { background:red; float:left; width:200px; }
#content { background:yellow; float:left; width:calc(100% - 200px) }

<div id="container">

	<div id="menu">
    foo
	</div>
	
	<div id="content">
    foo
	</div>

</div>

Answer 2

您可以使用flex：

#container {
  display: flex;
  width: 100%;
}

#menu {
  width: 200px;
  background: red;
}

#content {
  flex: 1;
  background: yellow;
}

<div id="container">

  <div id="menu">
    foo
  </div>

  <div id="content">
    foo
  </div>

</div>

或网格布局

#container {
  display: inline-grid;
  grid-template-columns: 200px auto;
  width: 100%;
}

#menu { background: red; }
#content { background: yellow; }

<div id="container">

  <div id="menu">
    foo
  </div>

  <div id="content">
    foo
  </div>

</div>

Answer 3

您可以将CSS添加到两个div中，这是float属性。

#menu{
float: left;
width: 200px;
}
#context{
float: right;
}

Answer 4

我不知道我是否理解你的想法：
无论里面有什么，您都希望div＃菜单的确切大小为200px吗？
解决方案：
您需要在CSS中执行此操作：
主要有3种不同的类型，包括CSS

1. em 标记内：（用于小型网站，外观完全相同，大多数程序员讨厌这样做）

<select onchange="exec('forecolor',this.value); this.selectedIndex=0;">
  <option class="heading" selected>- color -</option>
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
  <option value="black">Black</option>
</select>
<div contenteditable="true" id="editor">
  Lorem ipsum
</div>

2. head 标记内：（用于外观相同的小型网站，大多数程序员都对小型网站执行此操作）

<div id="container">

    <div id="menu" style="width: 200px;">
    </div>

    <div id="content">
    </div>

</div>

3.in .css文件中：（用于具有统一外观的大型网站）
HTML：

<head>
  <style>
    .menu{
       width:200px;
    }
  </style>
</head>    
<body>
    <div id="container">

        <div class="menu" id="menu">
        </div>

        <div id="content">
        </div>

    </div>
</body>

CSS：

<head>
  <link rel="stylesheet" type="text/css" href="maincss.css">
</head>    
<body>
    <div id="container">

        <div class="menu" id="menu">
        </div>

        <div id="content">
        </div>

    </div>
</body>

Answer 5

幸运的是，有一个相当简单的修复程序。唯一要做的就是向内容的div添加隐藏的溢出内容。

if (dontMakeHttpReq1) // where should this be placed?

request(httpReq1, function(error, response, body) {
  // do something, like handling errors...
  request(httpReq2, function(error, response, body) {
    // do something else
  });
});

祝你好运。

暗月

使div占据剩余宽度的100％？

5 个答案: