Question

我正在尝试制作一个带有徽标的菜单。我的徽标大小是固定的，每个单元格都有3个按钮。

我无法达到结果。

**示例：**

  .mainbox {
    height: auto;
    margin-left: auto;
    margin-right: auto;
    min-height: 100%;
    width: 100%;
}

#box {
    float: none;
    height: 182px;
    margin-left: auto;
    margin-top: 109px;
    clear: none;
    width: auto;
    margin-right: auto;
    background-color: rgb(77, 77, 77);
}

#box2 {
    float: none;
    height: 182px;
    margin-left: auto;
    margin-top: 0px;
    clear: none;
    width: 349.015625px;
    background-color: rgb(199, 0, 0);
    position: static;
    top: 0px;
    left: 0px;
    margin-right: auto;
}

#box1 {
    float: left;
    height: 158px;
    margin-left: 0%;
    margin-top: 12px;
    clear: none;
    width: 36.182452%;
    background-color: rgb(74, 164, 180);
}

#box3 {
    float: right;
    height: 158px;
    margin-left: 0px;
    margin-top: -170px;
    clear: none;
    width: 36.18369%;
    display: block;
    margin-right: 0%;
    background-color: rgb(78, 180, 74);
}

  <div id="mainbox" class="mainbox">
      <div id="box" >
          <div id="box1" >
          </div>
          <div id="box2" >
          </div>
          <div id="box3" >
          </div>
      </div>
  </div>

红色框”的大小是固定的，我希望绿色和蓝色框在侧面的剩余空间中自动调整大小。

我如何使其工作？

我的意思是

|||||||||||是中间框

============是2个具有自动尺寸的边框

现在具有不同的屏幕宽度：

1x：

============ ||||||||||| ============

0.5倍：

========== ||||||||||| =========

0.3倍：

======= |||||||||| ======

0.2倍：

===== |||||||||| =====

对不起，我的语言不好

Answer 1

Flexbox可以提供，使左右div的宽度相同。

.mainbox {}

#box {
  height: 182px;
  margin-top: 1em;
  background-color: rgb(77, 77, 77);
  display: flex;
}

#box2 {
  width: 350px;
  margin: 1em;
  background-color: rgb(199, 0, 0);
}

#box1 {
  margin: 1em;
  flex: 1;
  background-color: rgb(74, 164, 180);
}

#box3 {
  margin: 1em;
  flex: 1;
  background-color: rgb(78, 180, 74);
}

<div id="mainbox" class="mainbox">
  <div id="box">
    <div id="box1">
    </div>
    <div id="box2">
    </div>
    <div id="box3">
    </div>
  </div>
</div>

Answer 2

我已经使用width: calc((100% - 350px)/2)从中间框减去了两个框的宽度

.mainbox {
  height: auto;
  margin-left: auto;
  margin-right: auto;
  min-height: 100%;
  width: 100%;
}

#box {
  float: none;
  height: 182px;
  margin-left: auto;
  margin-top: 109px;
  clear: none;
  width: auto;
  margin-right: auto;
  background-color: rgb(77, 77, 77);
}

#box2 {
  float: none;
  height: 182px;
  margin-left: auto;
  margin-top: 0px;
  clear: none;
  width: 350px;
  background-color: rgb(199, 0, 0);
  position: static;
  top: 0px;
  left: 0px;
  margin-right: auto;
}

#box1 {
  float: left;
  height: 158px;
  margin-left: 0%;
  margin-top: 12px;
  clear: none;
  width: calc((100% - 350px)/2);
  background-color: rgb(74, 164, 180);
}

#box3 {
  float: right;
  height: 158px;
  margin-left: 0px;
  margin-top: -170px;
  clear: none;
  width: calc((100% - 350px)/2);
  display: block;
  margin-right: 0%;
  background-color: rgb(78, 180, 74);
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0">
</head>



<body>

  <div id="mainbox" class="mainbox">
    <div id="box">
      <div id="box1">
      </div>
      <div id="box2">
      </div>
      <div id="box3">
      </div>
    </div>
  </div>
</body>

</html>

Answer 3

这个怎么样？
我用桌子试过了

   body {
        margin: 0px;
    }

    table {
        width: 100vw;
    }

    tr {
        width: 100vw;
    }

    td {
        width: auto;
        border: 1px solid black;
    }

    .fixedsize {
        width: 500px;
    }

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0">
</head>


<body>

    <table>
        <tbody>
            <tr>
                <td>test</td>
                <td class="fixedsize">test</td>
                <td>test</td>
            </tr>
        </tbody>
    </table>

</body>

</html>

Answer 4

可以使用flexbox吗？试试看：

#box {
    height: 182px;
    background-color: rgb(77, 77, 77);
    display: flex;
}

#box2 {
    height: 182px;
    width: 349.015625px;
    background-color: rgb(199, 0, 0);
}

#box1 {
    height: 158px;
    margin-top: 12px;
    background-color: rgb(74, 164, 180);
    flex-grow: 1;
}

#box3 {
    height: 158px;
    margin-top: 12px;
    background-color: rgb(78, 180, 74);
    flex-grow: 1;
}

<div id="mainbox" class="mainbox">
    <div id="box" >
        <div id="box1" >
        </div>
        <div id="box2" >
        </div>
        <div id="box3" >
        </div>
    </div>
</div>

Answer 5

很容易向后兼容（floats vs flexbox）是使用2个浮点div，一半大小，中间绝对位置带有徽标，负边距：fiddle

* {
  box-sizing: border-box;
}
#box {
  width: 100%;
  float: left;
  position: relative;
  background: white;
}
#box2 {
  float: left;
  padding: 20px;
  position: absolute;
  top: 0;
  left: 50%;
  width: 200px;
  margin-left: -100px;
  background: red;
}
#box1, 
#box3{
  float: left;
  width: 50%;
}
#box1 {
  padding-right: 120px;
  background: blue;
}
#box3 {
  padding-left: 120px;
  background: green;
}

如何自动将元素调整为下一个元素？

5 个答案: