* {
box-sizing: border-box;
font-family: Helvetica;
}
.row {
width: 100%;
}
.section-title1, .section-title2, .section-title3 {
position: absolute;
width: 60px;
height: 20px;
border: 1px solid black;
top: 0px;
right: 0px;
text-align: center;
}
.section-title1 {
background-color: red;
}
.section-title2 {
background-color: cyan;
}
.section-title3 {
background-color: lightblue;
}
.section1, .section2, .section3 {
position: relative;
text-align: justify;
width:90%;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
padding: 25px;
}
.section1 {
background-color: pink;
}
.section2 {
background-color: green;
}
.section3 {
background-color: yellow;
}
h1 {
margin: 20px;
text-align: center;
}
@media (min-width: 992px) {
.col-lg-4 {
float: left;
width: 33.33%;
border: 1px solid black;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.col-md-6 {
float: left;
width: 50%;
border: 1px solid black;
}
.col-md-12 {
float: left;
width: 100%;
border: 1px solid black;
}
}
@media (max-width: 767px) {
.col-sm-12 {
float: left;
width: 100%;
border: 1px solid black;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Module 2 assignment</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h1> Our menu </h1>
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12"><p class="section1"><span class="section-title1">Chicken</span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p></div>
<div class="col-lg-4 col-md-6 col-sm-12"><p class="section2"><span class="section-title2">Beef</span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p></div>
<div class="col-lg-4 col-md-12 col-sm-12"><p class="section3"><span class="section-title3">Sushi</span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p></div>
</div>
</body>
</html>我需要关于在平板电脑 (md) View 中将第二行中的文本与第一行中的文本对齐的想法。
这是问题截图:
最佳答案
只需替换为我的样式...!然后它工作正常，除了 css 之外你的代码一切正常。
.section1, .section2, .section3 {
border: 1px solid black;
margin: 25px;
padding: 25px;
position: relative;
text-align: justify;
}
* {
box-sizing: border-box;
font-family: Helvetica;
}
.row {
width: 100%;
}
.section-title1, .section-title2, .section-title3 {
position: absolute;
width: 60px;
height: 20px;
border: 1px solid black;
top: 0px;
right: 0px;
text-align: center;
}
.section-title1 {
background-color: red;
}
.section-title2 {
background-color: cyan;
}
.section-title3 {
background-color: lightblue;
}
.section1, .section2, .section3 {
border: 1px solid black;
margin: 25px;
padding: 25px;
position: relative;
text-align: justify;
}
.section1 {
background-color: pink;
}
.section2 {
background-color: green;
}
.section3 {
background-color: yellow;
}
h1 {
margin: 20px;
text-align: center;
}
@media (min-width: 992px) {
.col-lg-4 {
float: left;
width: 33.33%;
border: 1px solid black;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.col-md-6 {
float: left;
width: 50%;
border: 1px solid black;
}
.col-md-12 {
float: left;
width: 100%;
border: 1px solid black;
}
}
@media (max-width: 767px) {
.col-sm-12 {
float: left;
width: 100%;
border: 1px solid black;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Module 2 assignment</title>
<link rel="stylesheet" href="css/styles.css">
<style>
* {
box-sizing: border-box;
font-family: Helvetica;
}
.row {
width: 100%;
}
.section-title1, .section-title2, .section-title3 {
position: absolute;
width: 60px;
height: 20px;
border: 1px solid black;
top: 0px;
right: 0px;
text-align: center;
}
.section-title1 {
background-color: red;
}
.section-title2 {
background-color: cyan;
}
.section-title3 {
background-color: lightblue;
}
.section1, .section2, .section3 {
border: 1px solid black;
margin: 25px;
padding: 25px;
position: relative;
text-align: justify;
}
.section1 {
background-color: pink;
}
.section2 {
background-color: green;
}
.section3 {
background-color: yellow;
}
h1 {
margin: 20px;
text-align: center;
}
@media (min-width: 992px) {
.col-lg-4 {
float: left;
width: 33.33%;
border: 1px solid black;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.col-md-6 {
float: left;
width: 50%;
border: 1px solid black;
}
.col-md-12 {
float: left;
width: 100%;
border: 1px solid black;
}
}
@media (max-width: 767px) {
.col-sm-12 {
float: left;
width: 100%;
border: 1px solid black;
}
}
</style>
</head>
<body>
<h1> Our menu </h1>
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12"><p class="section1"><span class="section-title1">Chicken</span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p></div>
<div class="col-lg-4 col-md-6 col-sm-12"><p class="section2"><span class="section-title2">Beef</span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p></div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12"><p class="section3"><span class="section-title3">Sushi</span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p></div>
</div>
</body>
</html> 
关于css - 如何在平板电脑(md) View 中将第二行中的文本与第一行中的文本对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44234404/