1
Ich erstelle eine einfache Homepage für meinen Kunden. Ich benutze Flex-Box, um den Hauptinhalt auf der Seite zu gestalten. Ich habe 2 div.container 's, die jeweils 2 img enthalten.Anzeigen von Flex-Elementen in einer Reihe auf größeren Bildschirmen, aber vertikal auf kleineren Bildschirmen gestapelt
In der Desktop-Ansicht möchte ich die 2 div.container 's inline anzeigen, aber wenn die Website in der mobilen Ansicht ist, möchte ich, dass sie gestapelt angezeigt werden.
Ich möchte auch der Rest des Inhalts egal gestapelt bleiben, was sie sehen ist.
Wie kann ich das erreichen?
function setHeight() {
\t $('.img-c').css('height', $('.img-c').innerWidth());
}
setInterval(setHeight, 10);:root {
background: #fff;
}
#logo {
display: block;
margin: auto;
width: 200px;
text-align: center;
}
nav ul {
display: flex;
justify-content: space-around;
list-style: none;
background: #0a0;
color: #fff;
font-size: 1.5rem;
font-family: 'Segoe UI', sans-serif;
}
li.selected {
color: orange;
}
nav ul li:hover {
color: springgreen;
cursor: pointer;
}
nav ul li.selected:hover {
color: #ff7700;
}
main {
display: flex;
flex-direction: column;
align-items: center;
flex-wrap: wrap;
}
main p {
text-align: center;
max-width: 80%;
font-size: 1.5rem;
font-family: 'Segoe UI';
}
main p:nth-of-type(3) {
font-weight: bold;
}
main hr {
width: 100%;
background: #0a0;
height: 1px;
}
.img-c {
width: 20%;
background-color: #000;
max-width: 200px;
min-width: 100px;
}
@media screen and (max-width: 416px) {
#bottom {
display: block;
order: 1;
}
.img-c {
width: 50%;
}
}
@media screen and (max-width: 358px) {
nav ul {
flex-direction: column;
padding: 0;
}
nav ul li {
width: 100%;
text-align: center;
}
nav ul li:nth-child(2n) {
background: #0c0;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/CompImmer_logo_final_web4.png" id="logo" alt="logo"/>
<nav>
<ul>
<li class="selected">Home</li>
<li>About</li>
<li>Classes</li>
<li>Jobs</li>
</ul>
</nav>
</header>
<main>
<div class="container">
<img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/2.jpg" alt="img" class="img-c"/>
<img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/5.jpg" alt="img" class="img-c" style="background: magenta"/>
</div>
<div class="container">
<img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/1.jpg" alt="img" class="img-c"/>
<img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/4.jpg" alt="img" class="img-c" style="background: magenta"/>
</div>
<p>Are you looking for computer classes that go beyond the typical summer camp or one-day experience?</p>
<hr/>
<p>Does your child have an interest in coding or computer hardware and want to learn what to do next?</p>
<hr/>
<p>Computer Immersion has the answer!</p>
<hr/>
<p>We teach computer science and tech culture to children who are 12-18 years old. Our classes immerse students in a wide range of hardware and software related topics such as scripting, coding, “tech speak”, networking, and hardware.</p>
<hr/>
<p>Our classes are taught by instructors with real world industry experience and meet for 9-week sessions at locations convenient for you.</p>
<hr/>
</main>