时间戳

首页 > 解决方案 > 需要基于 flexbox 的列，左侧是文本，右侧是图像

html - 需要基于 flexbox 的列，左侧是文本，右侧是图像

问题描述

对类似问题的一种回应是堆栈溢出问题 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 &amp; Learning Center</span><br>
<span style="font-size:.5em;">Expert help in Speech, Language &amp; 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>

标签： htmlcssflexboxalignment

解决方案

好的，如果我理解正确，那就给你。我在图像的左侧添加了 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;
  }

}

https://jsfiddle.net/hzux2zka/

推荐阅读