Question

我是CSS新手，遇到div元素问题。我有三个，在一个大的内部，这意味着填满屏幕。我希望它们彼此相邻，作为三个垂直条，中间一个具有固定宽度（1000px），另外两个是可更改的，具体取决于给定屏幕上的完整窗口大小。

HTML：

<div class="whole">
    <div class="left">
    </div>

    <div class="middle">
    </div>

    <div class="right">
    </div>
</div>

CSS：

div.left {
background-color: white;
}

div.middle {
background-color: blue;
width: 1000px;
}

div.right {
background-color: yellow;
}

在此先感谢，感谢任何帮助。

Answer 1

你可以用flex-box解决这个问题，这很容易：我为演示更改了1000px到300px：

＆＃13;

.whole
{
  display: flex;
  flex-flow: row nowrap;
  /*just for the demo:*/
  height: 100vh;
}

.whole .left,
.whole .right
{
  flex: 1 1 auto;
  background-color: silver;
}

.whole .middle
{
  flex: 1 0 300px;
  background-color: gray;
}

＆＃13;

<div class="whole">
    <div class="left">
    </div>

    <div class="middle">
    </div>

    <div class="right">
    </div>
</div>

＆＃13;

Answer 2

您可以在整个div上使用display inline-flex，并使用媒体查询进行响应。我还添加了一个媒体查询。如果屏幕小于或等于768px，那么整个div的宽度为100％。您还可以在媒体屏幕上将中间div宽度设置为100％。有任何问题请评论我。 :)

.whole{
  border:1px solid red;
  display:inline-flex;
}
div.left {
 background: white;
}

div.middle {
 background: blue;
 width: 1000px;
}

div.right {
 background: yellow;
}
@media only screen and (max-width:768px){
  .whole{
    width:100%;
  }
}

<div class="whole">
 <div class="left">A</div>
 
 <div class="middle">B</div>

 <div class="right">C</div>
   </div>

<div>元素的水平对齐方式

2 个答案: