* {
	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>





我需要有关在Tablet(md)视图中将第二行中的文本与第一行中的文本对齐的想法。

这是问题屏幕截图:css - 如何使用文本在Tablet(md) View 中将第二行中的文本与第一行中的文本对齐-LMLPHP

最佳答案

只需替换为我的样式...!然后它可以正常工作,除了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 - 如何使用文本在Tablet(md) View 中将第二行中的文本与第一行中的文本对齐-LMLPHP

07-24 09:39
查看更多