0
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>module2-solution</title>
</head>
<style >
\t /*basic style*/
\t * {
\t \t box-sizing: border-box;
\t }
\t body {
\t \t background-color: #9E8851;
\t }
\t h1 {
\t \t margin: 100px;
\t \t text-align: center;
\t \t font-family: Helvetica;
\t \t font-weight: bold;
\t \t font-size: 300%;
\t }
\t section {
\t \t position: relative;
\t \t width: 100%;
\t }
\t p {
\t \t position: relative;
\t \t clear: right;
\t }
\t div {
\t \t position: relative;
\t \t background-color: #BF7F3F;
\t \t border: 1px solid black;
\t \t width: 90%;
\t \t margin-left: auto;
\t \t margin-right: auto;
\t \t margin-bottom: 30px;
\t }
\t .sub {
\t \t float: right;
\t \t width: 100px;
\t \t padding: 5px;
\t \t margin: 0px;
\t \t border: 1px solid black;
\t \t text-align: center;
\t \t font-size: 120%;
\t \t font-weight: bold;
\t \t background-color: #B0D619;
\t \t
\t }
\t .content {
\t \t padding: 5px;
\t \t border: none;
\t \t background-color: #BF7F3F;
\t \t font-family: Helvetica;
\t \t color: black;
\t \t margin: 0px;
\t \t height: 200px;
\t \t overflow: auto;
\t }
\t
\t .row {
\t \t width: 90%;
\t }
\t
\t /*desktop version*/
\t @media (min-width: 992px){
\t \t .column-lg-4 {
\t \t \t float: left;
\t \t \t width: 33.33%;
\t \t }
\t }
\t /*tablet version*/
\t @media (min-width: 768px) and (max-width: 991px){
\t \t .colmn-md-6 {
\t \t \t float: left;
\t \t \t width: 50%;
\t \t \t margin-left: auto;
\t \t \t margin-right: auto;
\t \t }
\t \t .colmn-md-12 {
\t \t \t float: left;
\t \t \t width: 100%;
\t \t \t margin-left: auto;
\t \t \t margin-right: auto;
\t \t }
\t }
\t /*mobile version*/
\t @media (max-width: 767px){
\t \t .colmn-sm-12 {
\t \t \t float: left;
\t \t \t width: 100%;
\t \t }
\t }
</style>
<body >
<h1>Our Menu</h1>
\t <section class="column-lg-4 colmn-md-6 colmn-sm-12">
\t \t <div>
\t \t \t <p class="sub">Chicken</p>
\t \t \t <p class="content">
\t \t \t Popular chicken dishes include roasted chicken, fried chicken, chicken soup, Buffalo wings, tandoori chicken, butter chicken, and chicken rice. Chicken is also a staple of many fast food restaurants.
\t \t \t </p>
\t \t </div>
\t </section>
\t <section class="column-lg-4 colmn-md-6 colmn-sm-12">
\t \t <div>
\t \t \t <p class="sub">Beef</p>
\t \t \t <p class="content">Spiced beef is a cured and salted joint of round, topside, or silverside, traditionally served at Christmas in Ireland. It is a form of salt beef, cured with spices and saltpetre, intended to be boiled or broiled in Guinness or a similar stout, and then optionally roasted for a period after.</p>
\t \t </div>
\t </section>
\t <section class="column-lg-4 colmn-md-12 colmn-sm-12">
\t <div>
\t \t <p class="sub">Sushi</p>
\t \t \t <p class="content">Sushi can be prepared with either brown or white rice. It is often prepared with raw seafood, but some common varieties of sushi use cooked ingredients and many are vegetarian. Sushi is often served with pickled ginger, wasabi, and soy sauce.</p>
\t </div>
</body>
</html>, wenn ich die Webseite Größe in den Bereich wechseln zwischen der Breite von 768px zu 991px beheben, möchte ich der dritte Abschnitt für sich allein die gesamte Zeile nehmen . Die linke und die rechte Kante des dritten Abschnitts sind jedoch nicht vertikal mit der linken Kante des ersten Abschnitts und der rechten Kante des zweiten Abschnitts ausgerichtet. Wie kann ich das beheben?
Vielen Dank! Ich bin nur ein Anfänger und nicht ruhig vertraut mit dem HTML-Box-Modell. Ich werde es im Detail sehen. – Zachary