我有一个图像('repairPic')我想向右对齐，这没问题，我想在左侧堆叠两个元素('repairTitle & repairBtn')。我想使用 flexbox，因为我认为这是建立网站的好方法。
我是 html 和 css 的新手，这是我从事的第一个真正的元素，因此非常感谢任何帮助!
这是 HTML。
<!DOCTYPE html>
<html>
<head>
<title>Quandtico | Home</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header id="top" class="main-header">
<div class="top-nav">
<ul class="info">
<li><a href="#">quandticoguitars@gmail.com</a></li>
<li><a href="#">810-304-2166</a></li>
<li id="f1"><a href="#"><img class="fbook" src="imgs/facebook-f-brands.svg"/></a></li>
</ul>
</div>
<div class="main-nav">
<ul class="nav">
<li><h2>Quandtico</h2></li>
<li id='home'><a href='#'>Home</a></li>
<li><a href='#'>Repair Rates</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Custom Guitars</a></li>
</ul>
</div>
</header>
<div class="intro">
<h1 id="quandtico">QUANDTICO GUITARS & REPAIRS</h1>
<p>Looking for a new guitar? Need a repair done that you want done right? We’ve got it all here at Quandtico. Whether you’re looking for a custom built guitar, the highest quality repair, or just a tune up, we’ve got you covered. We’re located in the thumb of Michigan , and we make sure our customer receives only the best quality products and service. Contact us today to see what we’ve got in store for you!</p>
</div>
<div class="main">
<div class="repair">
<ul id="repairList">
<li class="repairTitle">
<h4>Repair</h4>
</li>
<li class="repairBtn">
<button>Repair Rates</button>
</li>
<li>
<img id="repairPic" src="imgs/bald-eagle-flying-water.jpg"/>
</li>
</ul>
</div>
<div class="build">
<h4>Build</h4>
<button class="build-btn">Custom Guitar</button>
<img id="buildPic" src="../"/>
</div>
<div class="best">
<img src="../"/>
<h4>Only The Best</h4>
</div>
</div>
<div class="contact">
<form action="index.html" method="post">
<h1>Contact</h1>
<fieldset>
<input placeholder="Name" type="text" id="name" name="user_name">
<input placeholder="Email" type="email" id="mail" name="user_email">
<input placeholder="Subject" type="text" id="subject" name="subject">
<textarea placeholder="Message" cols="50">
</textarea>
<button class="send">Send</button>
</fieldset>
</form>
</div>
<footer class="foot">
<p>quandticoguitars@gmail.com</p>
<img class="fbook" src="imgs/facebook-f-brands.svg"/>
<p>© by Quandtico.</p>
</footer>
</body>
</html>
这是 CSS。我正在专门查看修复和构建部分。现在我只处理“修复”部分。一旦我弄明白了，我就可以继续构建部分。
/* Base Styles ------*/
* {
box-sizing: border-box;
}
body {
font-family: 'Anton', sans-serif;
background-color: #fbeee6;
margin: 0;
display: flex;
flex-direction: column;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
color: #fbeee6;
}
h2 {
letter-spacing: .2em;
font-size: 2em;
padding-left: .8em;
margin-right: auto;
}
.fbook {
width: 1em;
height: 1em;
}
/* Header Section ---- */
.main-header {
background-color: #284c5e;
color: #fbeee6;
}
.top-nav {
margin-top: 1em;
border-bottom: 1px solid rgba(251, 238, 230, .25);
}
.top-nav .info {
display: flex;
flex-direction: row;
justify-content: flex-start;
padding-left: 15%;
padding-right: 15%;
}
.main-nav {
margin-top: -1em;
}
.main-nav .nav {
display: flex;
flex-direction: row;
padding-left: 15%;
padding-right: 15%;
}
.nav li {
display: inline-flex;
align-items: center;
}
#home {
margin-left: auto;
}
.info a {
text-align: center;
display: block;
padding: .85em 1.3em;
}
.nav a {
padding-left: 1em;
}
#f1 {
margin-left: auto;
}
/* Intro Section -----*/
.intro {
width: 100%;
height: 38em;
color: #fbeee6;
text-align: center;
vertical-align: middle;
background: url('../imgs/E-kit.jpg') no-repeat center;
background-size: cover;
}
#quandtico {
letter-spacing: .1em;
font-size: 5em;
text-align: center;
margin: 2em 20% 0 20%;
}
.intro p {
margin-left: 25%;
margin-right: 25%;
line-height: 1.5em;
}
/* Repair and Build Sections -----*/
#repairList {
display: flex;
flex-wrap: wrap;
height: 569px;
width: 100%;
justify-content: space-between;
}
#repairPic {
display: block;
margin-left: auto;
}
.repairTitle {
display: inline-flex;
margin: auto;
}
.repairBtn {
margin: auto;
}
最佳答案
一个解决方案是将前两个 li 标签合并为一个，将每个标签包装在一个 div 中。
<ul id="repairList">
<li>
<div class="repairTitle">
<h4>Repair</h4>
</div>
<div class="repairBtn">
<button>Repair Rates</button>
</div>
</li>
<li>
<img id="repairPic" src=""/>
</li>
</ul>
将 h4 和按钮设置为显示:如果您希望避免额外的 div， block 也可以工作。
这些解决方案避免了 float 定位引起的常见问题。
关于html - 如何将一个 flexbox 元素向右对齐，将两个堆叠在左侧？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52689581/