HTML / CSS div对齐

Question

调整大小后，我需要更改div的顺序以将两个徽标以50％的宽度彼此相邻并且将第三个div（标题）的宽度降低100％以下。 谁能告诉我我要去哪里了。

 .logo1 { width: 50%; float: left; top: 0px; } .logo2 { width: 50%; float: right; top: 0px; } .title { width: 100%; clear: both; } 

 <header> <div class="logo1"> <img src="Pictures/logo.png" width="189" height="61" border="0"> </div> <div class="title"> <h1 class="map_title">Infrastructure Web Map</h1> </div> <div class="logo2"> <img src="Pictures/Picture1.png" width="310" height="70" border="0"> </div> </header> 

Answer 1

您可以使用Flexbox来做到这一点 ：

 body {margin: 0} h1 { text-align: center; } header { display: flex; /* displays flex-items (children) inline */ flex-wrap: wrap; /* enables their wrapping */ } header > div { flex: 1; /* each takes 33.33% of the parent's width */ display: flex; /* addition */ justify-content: center; /* addition */ } img { display: block; /* removes bottom margin/whitespace */ width: 100%; /* responsiveness */ } @media (max-width: 568px) { header > div { flex: 0 1 50%; /* flex-grow = default, flex-shrink = default, flex-basis = 50% (initial width) */ } .title { flex: 1; /* stretches to fill the parent's width (100%) */ order: 1; /* changes the order, ie puts it below/after the #logo2 (by default its "order: 0") */ } } 

 <header> <div class="logo1"> <img src="http://placehold.it/300x200" alt="logo1"> </div> <div class="title"> <h1 class="map_title">Infrastructure Web Map</h1> </div> <div class="logo2"> <img src="http://placehold.it/300x200" alt="logo2"> </div> </header> 

Answer 2

在所有人的帮助下，经过进一步的研究和所有建议的结合，这就是我用来使其工作的方式：

header {
    background-color: #cccccc;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    }    

img {
    margin: auto;
    display: block;
    }

.logo1, .logo2 {
    width: 50%; 
    flex: 1 1 0;

}

.title {
    color: #336699;
    flex: 100%;
    order: 3;
    text-align: center;
    }
}