css - 将“float”转换为“flexbox”
问题描述
因此，我试图将使用浮动的页面转换为使用 flexbox 来保持相同的样式和外观。我现在正试图让树叶的图片在第一个断点之前全宽时保持在“立即预订”链接的右侧。
我已经在两个单独的类和 ID 上尝试过 justify-content 和 flex-direction，但是对于我的生活，我无法弄清楚它为什么保持内联。
我是这个网站的新手，所以如果我也需要提供 HTML，请告诉我，但我真的可以使用一些帮助，非常感谢！
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Exploring Nature :: Home</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="css/main1.css" />
</head>
<body>
<header id="masthead">
<div class="container">
<nav aria-label="Primary website navigation">
<ul>
<li><a href="#">Testimonials</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Tours</a></li>
<li><a href="#">Book Now!</a></li>
</ul>
<a href="#" id="navMenuTrigger"><img src="i/hamburger-menu.png" alt="Navigation menu" width="55" height="39" /></a>
</nav>
<h1>Exploring Nature</h1>
</div>
</header>
<main>
<section id="pageContent" aria-labelledby="contentHdr">
<div class="container">
<div class="halfColumn">
<h2 id="contentHdr">Featured Tour</h2>
<h3>Vermont in the Fall</h3>
<p>Join our experienced tour guides on a 2-day excursion into beautiful Vermont in late September.</p>
<p><strong>Activity Level:</strong> Moderate<br />
<strong>Duration:</strong> Short</p>
<p><a href="#" class="actionBtn">Book Now!</a></p>
</div>
<div class="halfColumn">
<div id="homeFeature"></div>
</div>
</div>
</section>
<section id="tourGallery" aria-labelledby="galleryHdr">
<div class="container">
<h2 id="galleryHdr">Find Your Perfect Outdoor Adventure</h2>
<a href="#" class="tour" id="fallTour">
<span>Fall</span>
</a>
<a href="#" class="tour" id="winterTour">
<span>Winter</span>
</a>
<a href="#" class="tour" id="springTour">
<span>Spring</span>
</a>
<a href="#" class="tour" id="summerTour">
<span>Summer</span>
</a>
<a href="#" class="tour" id="forestTour">
<span>Forest</span>
</a>
<a href="#" class="tour" id="mountainTour">
<span>Mountain</span>
</a>
<a href="#" class="tour" id="islandTour">
<span>Island</span>
</a>
<a href="#" class="tour" id="streamTour">
<span>Stream</span>
</a>
</div>
</section>
</main>
<footer>
All content © Exploring Nature. All Rights Reserved.
</footer>
</body>
</html>
CSS
@media all {
header, footer, nav, aside, article, section {display: block;}
body {margin: 0; padding: 0;}
#masthead h1 {margin: 0; font: 700 34px 'Noto Serif', serif;}
}
@media screen {
body {font: 400 100%/1.4 'Roboto', sans-serif;}
h2 {font: 400 180%/1.4 'Roboto', sans-serif;}
h3 {font: 700 140%/1.4 'Roboto', sans-serif;}
footer {font-size: 90%; text-align: center; background: #2a2a2a; color: #fff; padding: 15px 0;}
.container {width: 1170px; margin: 0 auto;}
.halfColumn {width: 50%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-start; padding: 0 15px 0 0;}
/* masthead and top of content area */
#masthead {padding: 30px 0; background: #2a2a2a; color: #fff; border-bottom: 1px solid #aaa;}
#masthead nav ul {list-style: none; margin: 0; padding: 0;}
#masthead nav li {float: right; margin-left: 10px;}
#masthead nav ul a, #pageContent .actionBtn {margin-top: 7px; color: #fff; font-weight: 500; text-decoration: none; display: inline-block; padding: 8px 16px; border-radius: 12px;}
#pageContent .actionBtn {background: #ccc; color: #000; padding: 12px 20px; font-size: 120%;}
#masthead nav ul a:hover, #masthead nav ul a:focus, #pageContent .actionBtn:hover, #pageContent .actionBtn:focus {background: #fff; color: #000;}
#pageContent {padding: 30px 0; background: #2a2a2a; color: #fff; overflow: auto;}
#homeFeature {border: 7px solid #6b6b6b; border-radius: 50%; width: 375px; height: 375px; background: url(../i/maple-leaves-background.jpg) no-repeat center; background-size: cover; display: flex; flex-direction: column; justify-content: flex-end; }
#navMenuTrigger {float: right; display: none;}
/* tours */
#galleryHdr {text-align: center;}
#tourGallery {background: #ccc; overflow: auto; padding: 30px 0 50px;}
.tour {position: relative; top: 0; left: 0; float: left; border: 5px solid #fff; box-sizing: border-box; width: 277px; background-size: cover; min-height: 200px; margin: 0 15px 15px 0;}
.tour span {position: absolute; bottom: 0; width: 100%; padding: 5px 0; background: rgba(0,0,0,0.6); color: #fff; text-align: center;}
#fallTour {background: url(../i/fall-tour.jpg) top left no-repeat;}
#winterTour {background: url(../i/winter-tour.jpg) top left no-repeat;}
#springTour {background: url(../i/spring-tour.jpg) center no-repeat;}
#summerTour {background: url(../i/summer-tour.jpg) center no-repeat;}
#forestTour {background: url(../i/forest-tour.jpg) center no-repeat;}
#mountainTour {background: url(../i/mountain-tour.jpg) center no-repeat;}
#islandTour {background: url(../i/island-tour.jpg) bottom center no-repeat;}
#streamTour {background: url(../i/stream-tour.jpg) center no-repeat;}
}
@media screen and (max-width: 1190px) {
.container {width: auto; padding: 0 20px;}
.tour {width: 31%; margin: 0 3% 3% 0;}
#tourGallery > div > a:nth-child(4), #tourGallery > div > a:nth-child(7) {margin-right: 0;}
}
@media screen and (max-width: 800px) {
.tour {width: 45%; margin: 2%;}
#tourGallery > div > a:nth-child(4), #tourGallery > div > a:nth-child(7) {margin-right: 2%;}
.halfColumn, #homeFeature {float: none; width: 100%;}
#homeFeature {width: 300px; height: 300px; margin: 50px auto 20px;}
#navMenuTrigger {display: inline-block;}
header nav li {display: none;}
}
@media screen and (max-width: 500px) {
#masthead h1 {font-size: 25px;}
.tour {float: none; width: 100%; margin: 20px 0; display: block;}
#tourGallery > div > a:nth-child(4), #tourGallery > div > a:nth-child(7) {margin-right: 0;}
}
@media print {
body {font: 400 14pt/1.4 'Noto Serif', serif; color: #000;}
h2 {font: 400 20pt/1.4 'Noto Serif', serif;}
h3 {font: 400 17pt/1.4 'Noto Serif', serif;}
#masthead nav {display: none;}
#masthead h1 {font-size: 24pt;}
footer {font-size: 11pt; margin-top: 30pt;}
#pageContent {margin: 30pt 0;}
.tour {display: block; margin: 10pt 0;}
a {color: #000;}
}
解决方案
我建议添加display: flex，#pageContent .container这里是我的代码：
#pageContent .container {
display: flex;
/* if you need it side-by-side */
flex-direction: row;
/* if you need it stack on each other */
/* flex-direction: column; */
}
如果你需要更多关于 flex 的文档，我建议阅读这篇文章 A Complete Guide to Flexbox
@media all {
header, footer, nav, aside, article, section {display: block;}
body {margin: 0; padding: 0;}
#masthead h1 {margin: 0; font: 700 34px 'Noto Serif', serif;}
}
@media screen {
body {font: 400 100%/1.4 'Roboto', sans-serif;}
h2 {font: 400 180%/1.4 'Roboto', sans-serif;}
h3 {font: 700 140%/1.4 'Roboto', sans-serif;}
footer {font-size: 90%; text-align: center; background: #2a2a2a; color: #fff; padding: 15px 0;}
.container {width: 1170px; margin: 0 auto;}
.halfColumn {width: 50%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-start; padding: 0 15px 0 0;}
/* masthead and top of content area */
#masthead {padding: 30px 0; background: #2a2a2a; color: #fff; border-bottom: 1px solid #aaa;}
#masthead nav ul {list-style: none; margin: 0; padding: 0;}
#masthead nav li {float: right; margin-left: 10px;}
#masthead nav ul a, #pageContent .actionBtn {margin-top: 7px; color: #fff; font-weight: 500; text-decoration: none; display: inline-block; padding: 8px 16px; border-radius: 12px;}
#pageContent .actionBtn {background: #ccc; color: #000; padding: 12px 20px; font-size: 120%;}
#masthead nav ul a:hover, #masthead nav ul a:focus, #pageContent .actionBtn:hover, #pageContent .actionBtn:focus {background: #fff; color: #000;}
#pageContent {padding: 30px 0; background: #2a2a2a; color: #fff; overflow: auto;}
#homeFeature {border: 7px solid #6b6b6b; border-radius: 50%; width: 375px; height: 375px; background: url(../i/maple-leaves-background.jpg) no-repeat center; background-size: cover; display: flex; flex-direction: column; justify-content: flex-end; }
#navMenuTrigger {float: right; display: none;}
/* tours */
#galleryHdr {text-align: center;}
#tourGallery {background: #ccc; overflow: auto; padding: 30px 0 50px;}
.tour {position: relative; top: 0; left: 0; float: left; border: 5px solid #fff; box-sizing: border-box; width: 277px; background-size: cover; min-height: 200px; margin: 0 15px 15px 0;}
.tour span {position: absolute; bottom: 0; width: 100%; padding: 5px 0; background: rgba(0,0,0,0.6); color: #fff; text-align: center;}
#fallTour {background: url(../i/fall-tour.jpg) top left no-repeat;}
#winterTour {background: url(../i/winter-tour.jpg) top left no-repeat;}
#springTour {background: url(../i/spring-tour.jpg) center no-repeat;}
#summerTour {background: url(../i/summer-tour.jpg) center no-repeat;}
#forestTour {background: url(../i/forest-tour.jpg) center no-repeat;}
#mountainTour {background: url(../i/mountain-tour.jpg) center no-repeat;}
#islandTour {background: url(../i/island-tour.jpg) bottom center no-repeat;}
#streamTour {background: url(../i/stream-tour.jpg) center no-repeat;}
/* new */
#pageContent .container {
display: flex;
/* if you need it side-by-side */
flex-direction: row;
/* if you need it stack on each other */
/* flex-direction: column; */
}
/* new */
}
@media screen and (max-width: 1190px) {
.container {width: auto; padding: 0 20px;}
.tour {width: 31%; margin: 0 3% 3% 0;}
#tourGallery > div > a:nth-child(4), #tourGallery > div > a:nth-child(7) {margin-right: 0;}
}
@media screen and (max-width: 800px) {
.tour {width: 45%; margin: 2%;}
#tourGallery > div > a:nth-child(4), #tourGallery > div > a:nth-child(7) {margin-right: 2%;}
.halfColumn, #homeFeature {float: none; width: 100%;}
#homeFeature {width: 300px; height: 300px; margin: 50px auto 20px;}
#navMenuTrigger {display: inline-block;}
header nav li {display: none;}
}
@media screen and (max-width: 500px) {
#masthead h1 {font-size: 25px;}
.tour {float: none; width: 100%; margin: 20px 0; display: block;}
#tourGallery > div > a:nth-child(4), #tourGallery > div > a:nth-child(7) {margin-right: 0;}
}
@media print {
body {font: 400 14pt/1.4 'Noto Serif', serif; color: #000;}
h2 {font: 400 20pt/1.4 'Noto Serif', serif;}
h3 {font: 400 17pt/1.4 'Noto Serif', serif;}
#masthead nav {display: none;}
#masthead h1 {font-size: 24pt;}
footer {font-size: 11pt; margin-top: 30pt;}
#pageContent {margin: 30pt 0;}
.tour {display: block; margin: 10pt 0;}
a {color: #000;}
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Exploring Nature :: Home</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="css/main1.css" />
</head>
<body>
<header id="masthead">
<div class="container">
<nav aria-label="Primary website navigation">
<ul>
<li><a href="#">Testimonials</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Tours</a></li>
<li><a href="#">Book Now!</a></li>
</ul>
<a href="#" id="navMenuTrigger"><img src="i/hamburger-menu.png" alt="Navigation menu" width="55" height="39" /></a>
</nav>
<h1>Exploring Nature</h1>
</div>
</header>
<main>
<section id="pageContent" aria-labelledby="contentHdr">
<div class="container">
<div class="halfColumn">
<h2 id="contentHdr">Featured Tour</h2>
<h3>Vermont in the Fall</h3>
<p>Join our experienced tour guides on a 2-day excursion into beautiful Vermont in late September.</p>
<p><strong>Activity Level:</strong> Moderate<br />
<strong>Duration:</strong> Short</p>
<p><a href="#" class="actionBtn">Book Now!</a></p>
</div>
<div class="halfColumn">
<div id="homeFeature"></div>
</div>
</div>
</section>
<section id="tourGallery" aria-labelledby="galleryHdr">
<div class="container">
<h2 id="galleryHdr">Find Your Perfect Outdoor Adventure</h2>
<a href="#" class="tour" id="fallTour">
<span>Fall</span>
</a>
<a href="#" class="tour" id="winterTour">
<span>Winter</span>
</a>
<a href="#" class="tour" id="springTour">
<span>Spring</span>
</a>
<a href="#" class="tour" id="summerTour">
<span>Summer</span>
</a>
<a href="#" class="tour" id="forestTour">
<span>Forest</span>
</a>
<a href="#" class="tour" id="mountainTour">
<span>Mountain</span>
</a>
<a href="#" class="tour" id="islandTour">
<span>Island</span>
</a>
<a href="#" class="tour" id="streamTour">
<span>Stream</span>
</a>
</div>
</section>
</main>
<footer>
All content © Exploring Nature. All Rights Reserved.
</footer>
</body>
</html>推荐阅读
- apache - laravel 护照 outh2 不能在 livehost 中工作
- c++ - OpenCV 3.4.3 抛出（-212）解析错误异常（icvXMLParseTag）
- coq - Coq：证明命题 f (xy) -> fy
- latex - Latex：为 natbib 包的参考书目设置另一个目录（Windows）
- haskell - 在 Haskell 中，如果一个函数返回一个“Maybe a”类型只是为了保证它是安全的和完全的，那么它还有什么用处呢？
- php - php parsing json with - + characters
- r - Replacing the source in click-stream data
- c# - 如何将第二个（子）表单与主（父）表单一起放在窗口 z 顺序的前面
- scheme - 交错方案，违反合同
- php - 重载的mysql连接