Одним из ответов на аналогичную проблему является вопрос переполнения стека 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>