Html 需要基于flexbox的列，文本在左侧，图像在右侧_Html_Css_Flexbox_Alignment

Html 需要基于flexbox的列，文本在左侧，图像在右侧

html css

Html 需要基于flexbox的列，文本在左侧，图像在右侧,html,css,flexbox,alignment,Html,Css,Flexbox,Alignment,对类似问题的一个回答是堆栈溢出问题44357820。这里的建议是：不要在flexbox中使用百分比在这里似乎没有帮助。在下面代码的左列中，我希望在该列的左侧有一些文本实例，右侧有相应的图像，垂直向下层叠，在智能手机的断点上，我希望定位为文本，然后在该列下方是图像，然后是文本等。首先，我将图像向右对齐。然而，当我模拟智能手机时，它会离开屏幕向左移动。另一个似乎有希望的回答是问题28338855，但在我的情况下似乎不起作用非常感谢您的帮助谢谢 CSS+HTML: <!DOCTYPE htm

对类似问题的一个回答是堆栈溢出问题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>


页面标题
* {
框大小：边框框；
}
/*造型*/
身体{
字体系列：Arial；
保证金：0；
}
/*标题/标志标题*/
.标题{
填充：50px；
文本对齐：左对齐；
背景：#1abc9c；
颜色：白色；
字号：2em；
背景图片：url(https://picsum.photos/2000/235/?image=1002)
}
/*设置顶部导航栏的样式*/
navbar先生{
显示器：flex；
背景色：#333；
}
/*设置导航栏链接的样式*/
纳瓦尔先生{
颜色：白色；
填充：14px 20px；
文字装饰：无；
文本对齐：居中；
}
/*悬停时更改颜色*/
.导航栏a:悬停{
背景色：#ddd；
颜色：黑色；
}
/*柱状容器*/
.第{
显示器：flex；
柔性包装：包装；
}
/*创建两个相邻的不相等列*/
/*侧栏/左栏*/
.这边{
宽度：30%；
显示器：flex；
弯曲方向：立柱；
背景色：#f1f1；
填充：20px；
}
/*主栏*/
梅因先生{
宽度：70%；
背景色：白色；
填充：20px；
}
/*左列图像*/
.leftimage
{
自对准：柔性端；
}
/*页脚*/
.页脚{
填充：20px；
文本对齐：居中；
背景：ddd；
}
/*假图像，仅此示例*/
fakeimg先生{
背景色：#aaa；
宽度：100%；
填充：20px；
}
/*响应式布局-当屏幕宽度小于700px时，使两列堆叠在彼此的顶部，而不是相邻*/
@媒体屏幕和屏幕（最大宽度：700px）{
.row、.navbar{
弯曲方向：立柱；
}
}
通讯及；学习中心

语音、语言和语言方面的专家帮助；1984年以来的识字率

标题
标题说明，2017年12月7日
形象
一些文字
这是因为，工作人员应该为献身于和平事业的精英们服务，因为他们的劳动和财富是暂时的。但是，我们必须尽可能少地进行练习


标题
标题说明，2017年9月2日
形象
一些文字
这是因为，工作人员应该为献身于和平事业的精英们服务，因为他们的劳动和财富是暂时的。但是，我们必须尽可能少地进行练习
页脚

好的，伙计，如果我没听错的话，给你。我已经为测试添加了3张图片，并在图片左侧添加了相应的文本，这些图片将在中间对齐。如果不希望居中对齐，只需删除此

“对齐项目：居中”

。这是一个有效的例子

<div class="wrapper">
  <div class="text">Text 1</div>
    <img src="https://picsum.photos/235/235/?image=1002">
  </div>
</div>

我现在正在运行您的代码，我看到左侧有一张图片，右侧有文章。你能确认一下你想要什么样的行为吗？在手机上，你想要上面的文章和下面的图片吗？哦，谢谢！在左侧列中，您在右侧看到的图像将由文本伴随到左侧。例如，我们假设有3张图片。Img1 Img2 Img3。我希望它们都垂直堆放在柱子的右边。在每个图像的左侧，也垂直堆叠，txt1、txt2和txt3。当屏幕在智能手机上时，我希望堆栈从上到下为txt1、Img1、txt2、Img2、txt3、Img3等。请让我知道这是否充分解释了它。再次感谢你！StevePS——右边更宽的专栏和文章不属于本期。

* {
    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;
  }

}