Question

我正在尝试显示彼此相邻的两个div。第一个是200x200像素，第二个是第一个的右边10个像素。它的高度为200像素，其宽度必须填充在页面右侧的右侧。

到目前为止，我有这个：

<html>
<head>
<style>
div.div1 {
  border: 1px solid red;
  color: red;
  width: 200px;
  height: 200px;
  float: left;
}

div.div2 {
  border: 1px solid black;
  width: 100%;
  height: 200px;
  float: left;
  margin-left: 10px;
}
</style>
</head>
<body>

<div class="div1"></div>
<div class="div2">Test123</div>
</body>
</html>

这适用于前两个要求，但是当我设置width: 100%时，它会低于此值。如果我将它设置为像素数似乎可以工作，但是在我改变窗口大小时不会调整。我如何解决这个问题，以便第二个元素一直延伸到右边？

Answer 1

您可以在父级上使用flex，并设置.div2 { flex-grow: 1; }以使其消耗.div1剩余的所有可用空间

body {
  display: flex;
}
.div1 {
  width: 200px;
  height: 200px;
  color: red;
  border: 1px solid red;
}
.div2 {
  border: 1px solid black;
  margin-left: 10px;
  flex-grow: 1;
}

<div class="div1">div1</div>
<div class="div2">div2</div>

Answer 2

你可以使用calc：

.div2 {
  width: calc(100% - 214px);
}

100％减去200 px，10px边距，4px边框（2x左右边框）

Answer 3

试试这个：

<html>    
<head>
    <style>
        #div1 {
            float:left;
            width:200px;
            border:1px solid red;
     	    min-height:200px;
        }
        #div2 {
            margin-left: 210px;
            border:1px solid green;
            min-height:200px;
        }
    </style>
</head>    
<body>
    <div id="div1">&nbsp;</div>
    <div id="div2">&nbsp;</div>
</body>  
</html>

Answer 4

提示1 ：在两个div中使用百分比来添加总计100％。

提示2 ：使用max-width属性，以便第二个div可以扩展到不再某个点。

提示3 ：使用开发人员工具（检查），选择第二个div并增加像素宽度，直到达到页面的总宽度。

div div旁边的div和第二个的宽度

4 个答案: