Css 100%宽度标题。希望中心元素是唯一收缩的对象吗_Css

Css 100%宽度标题。希望中心元素是唯一收缩的对象吗

css

Css 100%宽度标题。希望中心元素是唯一收缩的对象吗,css,Css,您好，请看图片，了解我真正需要的最佳描述。我只是从css开始。我觉得我接近解决办法了它是填充屏幕宽度的标题栏。当屏幕收缩时，图像中的元素2应该是唯一收缩的对象，因为它没有内容。其他元素，我想作为一个固定的200px，以适应输入框到目前为止，我的代码是： * { border: 0px dashed blue; } div { height: 150px; width: 15%; border: 0px solid black; border-radius: 0px; display: in

您好，请看图片，了解我真正需要的最佳描述。我只是从css开始。我觉得我接近解决办法了

它是填充屏幕宽度的标题栏。当屏幕收缩时，图像中的元素2应该是唯一收缩的对象，因为它没有内容。其他元素，我想作为一个固定的200px，以适应输入框

到目前为止，我的代码是：

* {
border: 0px dashed blue;
}

div {
height: 150px;
width: 15%;
border: 0px solid black;
border-radius: 0px;
display: inline-block;

}

#one {
background-color: #FF0000;
width: 150px
}

#two {
background-color: #0000FF;
width: 50%; 
}

#three {
background-color: #FFD700;
width: 200px;

}

#four {
background-color: #308014;
width: 200px;
}

#five {
background-color: pink;
width: 100px;
}

#WAYText {
background-color: purple;
display: block;
height: 25%;
width: 200px;
}

#WAYInput {
background-color: cyan;
display: block;
height: 25%;
width: 200px;
}

#SearchText {
background-color: purple;
display: block;
height: 25%;
width: 200px;
}

#SearchInput {
background-color: cyan;
display: block;
height: 25%;
width: 200px;
}

#HowText {
background-color: purple;
display: block;
height: 25%;
width: 200px;
}

#HowInput {
background-color: cyan;
display: block;
height: 25%;
width: 200px;
}

#DateText {
background-color: purple;
display: block;
height: 25%;
width: 200px;
}

#DateInput {
background-color: cyan;
display: block;
height: 25%;
width: 200px;
}

以及html：

<!DOCTYPE html>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    <title>Result</title>
</head>
<body>
    <div id="one"></div>
    <div id="two"></div>
    <div id="three">
        <div id="WAYText"></div>
        <div id="WAYInput"></div>
        <div id="SearchText"></div>
        <div id="SearchInput"></div>
       </div>
    <div id="four">
        <div id="HowText"></div>
        <div id="HowInput"></div>
        <div id="DateText"></div>
        <div id="DateInput"></div>
    </div>
    <div id="five"></div>
    </body>
</html>


结果

根据您的浏览器支持，请查看Flexbox:。使用本页中提到的“Flex grow”方法可以进行此布局。（编辑：或flex shrink可能是：）对，我想我已经做到了-我使用了一个容器来保存所有内容-删除了元素2，并将其他元素浮动到右侧。我确实看过flexbox，但是浏览器的兼容性让我担心！不管怎样，还是要谢谢你——它看起来对未来非常强大！我对此有另一个想法，但现在（在工作中！）还不能真正动手——如果你已经解决了，那就太棒了：）