对类似问题的一个回应是堆栈溢出问题 44357820。那里的建议 re: not to use percentages with flexbox 在这里似乎没有帮助。在下面代码的左栏中，我希望在该栏的左侧有许多文本实例，并在右侧附有图片，垂直向下层叠，在智能手机的断点上，我希望定位为文本，然后在其下方是图像，然后是文本等。首先，我将图像向右 flex 对齐。但是，当我模拟智能手机时，它会从屏幕向左移动。另一个看起来很有希望的回答是问题 28338855，但在我的情况下似乎不起作用。
非常感谢任何帮助!
谢谢!
CSS + HTML:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
/* Style the body */
body {
font-family: Arial;
margin: 0;
}
/* Header/logo Title */
.header {
padding: 50px;
text-align: left;
background: #1abc9c;
color: white;
font-size: 2em;
background-image: url(https://picsum.photos/2000/235/?image=1002)
}
/* Style the top navigation bar */
.navbar {
display: flex;
background-color: #333;
}
/* Style the navigation bar links */
.navbar a {
color: white;
padding: 14px 20px;
text-decoration: none;
text-align: center;
}
/* Change color on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* Column container */
.row {
display: flex;
flex-wrap: wrap;
}
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
width: 30%;
display: flex;
flex-direction: column;
background-color: #f1f1f1;
padding: 20px;
}
/* Main column */
.main {
width: 70%;
background-color: white;
padding: 20px;
}
/* left column images */
.leftimage
{
align-self:flex-end;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
}
/* Fake image, just for this example */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
.row, .navbar {
flex-direction: column;
}
}
</style>
</head>
<body>
<!-- Header -->
<div class="header">
<span>Communication & Learning Center</span><br>
<span style="font-size:.5em;">Expert help in Speech, Language & Literacy since 1984<br><span>
</div>
<!-- Navigation Bar -->
<div class="navbar">
<a href="#">Home</a>
<a href="#">Reading</a>
<a href="#">Language</a>
<a href="#">Speech</a>
</div>
<!-- The flexible grid (content) -->
<div class="row">
<div class="side">
<div class=leftimage>
<!-- <img src="sp.png" width=250px> -->
<img src="https://picsum.photos/235/235/?image=1002">
</div>
</div>
<div class="main">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
<br>
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
<!-- Footer -->
<div class="footer">
<h2>Footer</h2>
</div>
</body>
</html>
最佳答案
好的，伙计，如果我没理解错的话，给你。我在图像左侧添加了 3 张测试图片和相应的文本，这些文本将居中对齐。如果您不想居中对齐，只需删除此 "align-items:center"。这是工作示例..
<div class="wrapper">
<div class="text">Text 1</div>
<img src="https://picsum.photos/235/235/?image=1002">
</div>
</div>
样式
* {
box-sizing: border-box;
}
/* Style the body */
body {
font-family: Arial;
margin: 0;
}
/* Header/logo Title */
.header {
padding: 50px;
text-align: left;
background: #1abc9c;
color: white;
font-size: 2em;
background-image: url(https://picsum.photos/2000/235/?image=1002)
}
/* Style the top navigation bar */
.navbar {
display: flex;
background-color: #333;
}
/* Style the navigation bar links */
.navbar a {
color: white;
padding: 14px 20px;
text-decoration: none;
text-align: center;
}
/* Change color on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* Column container */
.row {
display: flex;
flex-wrap: wrap;
}
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
width: 30%;
display: flex;
flex-direction: column;
background-color: #f1f1f1;
padding: 20px;
}
/* Main column */
.main {
width: 70%;
background-color: white;
padding: 20px;
}
/* left column images */
.leftimage
{
align-self:flex-end;
}
.leftimage .wrapper {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.leftimage .wrapper .text {
margin-right: 10px;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
}
/* Fake image, just for this example */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
.row, .navbar {
flex-direction: column;
}
.leftimage .wrapper {
flex-direction: column;
}
.leftimage .wrapper .text{
margin-bottom: 10px;
}
}
关于html - 需要基于 flexbox 的列，左侧是文本，右侧是图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50164623/