【发布时间】：2018-05-04 23:46:22
【问题描述】：
对类似问题的一个回应是堆栈溢出问题 44357820。那里的建议是：不要在 flexbox 中使用百分比在这里似乎没有帮助。在下面代码的左列中，我希望在该列的左侧有多个文本实例，并在右侧有伴随的图像，垂直向下级联，并且在智能手机的断点上我希望定位是文本，然后在其下方，图像，然后是文本等。对于初学者，我将图像向右弯曲对齐。但是，当我模拟智能手机时，它会从屏幕左侧移出。另一个似乎很有希望的回答是问题 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 张图像。图1 图2 图3。我希望它们都垂直堆叠到该列的右侧。而在每张图片的左侧，也垂直堆叠，txt1 txt2 和 txt3。当屏幕在智能手机上时，我希望堆栈从上到下依次为 txt1、Img1、txt2、Img2、txt3、Img3 等。如果这足以解释，请告诉我。再次感谢你！史蒂夫
-
PS- 右边更宽的一栏，以及文章，不属于本期。
标签： html css flexbox alignment