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>私は768pxから991pxの幅の範囲にWebページのサイズを変更したとき、私は3番目のセクションは、それ自体で行全体をしたいどのように修正することができます。ただし、第3セクションの左端および右端は、第1セクションの左端および第2セクションの右端と垂直に配置されていません。どうすれば修正できますか？
ありがとうございました！私はちょうど初心者であり、静かではなく、HTMLボックスモデルに精通しています。私は詳細でそれを見ます。 – Zachary