Question

我正在努力让以下工作与css（宽度调整大小）：

我在另一个div里面有4个div。两个div中的两个，即1st和3d，都有一个文本并且大小固定（我们事先并不知道）。另外两个div，A和B，应该将每个div占剩余空间的50％。

理想情况下，分钟。宽度，使方框2和3转到新的一行。

纯css有可能吗？

Answer 1

如果您使用calc()功能，也许可以。如果您无法使用它，则可以尝试使用flexbox，但与旧浏览器的兼容性较低。

.content {
  font-size: 0;
}
.content > * {
  font-size: 16px;
}
.fixed {
  width: 50px;
}
.a, .b, .c, .d { 
  display: inline-block;
  vertical-align:top;
}
.b, .d {
  width: calc(50px - 50px - 50%);
}

这意味着.b, .d尺寸为.a - .c - 50%

祝你好运

Answer 2

我相信这就是你要找的东西？

以下是指向其实时实例的链接 - ＆gt; https://jsfiddle.net/ehnuzyo7/

// HTML

<!DOCTYPE html>
<html>
<head>
<link href="index.css" rel="stylesheet">    
</head>
<body>
<div id="container">
    <div>Variable Size</div>
    <div class="fixed">A</div>
    <div>Variable Size</div>
    <div class="fixed">B</div>
</div>  
</body>
</html>

// CSS

body{
    display: -webkit-flex;
    display: flex;

    -webkit-justify-content: center;
    justify-content: center;

    margin: 0 !important;
    width: 100vw;
    height: 100vh;
}
#container{
    display: -webkit-flex;
    display: flex;

    -webkit-justify-content: center;
    justify-content: center;

    -webkit-align-self: center;
    align-self: center;

    width: 600px;
    background: #ccc;
    border: 2px solid black;
}
#container>div{
    display: -webkit-flex;
    display: flex;

    -webkit-justify-content: center;
    justify-content: center;

    -webkit-flex: 1;
    flex: 1;

    -webkit-align-self: center;
    align-self: center;

    background: #5c5c5c;
    color: #fff;
    margin: 5px;
}

.fixed{
    max-width: 50px;
}

如何将div调整为另一个Div

2 个答案: