学习CSS，这是示例代码。文本块"；标题标题"；在图片后面，如何将其移动到与图片相同的行？
body,
h1,
h2,
h3,
h4,
h5 {
font-family: "Raleway", sans-serif
}<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<body class="w3-light-grey">
<!-- w3-content defines a container for fixed size centered content,
and is wrapped around the whole page content, except for the footer in this example -->
<div class="w3-content" style="max-width:1400px">
<!-- Header -->
<header class="w3-container w3-center w3-padding-32">
<h1><b>MY BLOG</b></h1>
<p>Welcome to the blog of <span class="w3-tag">unknown</span></p>
</header>
<div class="w3-row l8 s12">
<!-- Blog entry -->
<div class="w3-card-4 w3-margin w3-white">
<img src="/w3images/woods.jpg" alt="Nature" style="width:100%">
<div class="w3-container">
<h3><b>TITLE HEADING</b></h3>
<h5>Title description, <span class="w3-opacity">April 7, 2014</span></h5>
</div>
<div class="w3-container">
<p>Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl. Sed mattis nunc id lorem euismod placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at. Phasellus sed ultricies mi non congue ullam corper. Praesent tincidunt
sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
<hr>
</div>
<br>
<!-- END w3-content -->
</div>
</body>将这两个元素嵌套在父.wrapper中并使用flex。
body,
h1,
h2,
h3,
h4,
h5 {
font-family: "Raleway", sans-serif
}
.wrapper {
display: flex;
align-items: center;
}
img {
max-width: 50%;
}
.w3-container {
margin: auto;
}<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<body class="w3-light-grey">
<!-- w3-content defines a container for fixed size centered content,
and is wrapped around the whole page content, except for the footer in this example -->
<div class="w3-content" style="max-width:1400px">
<!-- Header -->
<header class="w3-container w3-center w3-padding-32">
<h1><b>MY BLOG</b></h1>
<p>Welcome to the blog of <span class="w3-tag">unknown</span></p>
</header>
<div class="w3-row l8 s12">
<!-- Blog entry -->
<div class="w3-card-4 w3-margin w3-white">
<div class="wrapper">
<img src="https://dummyimage.com/600x400/000/fff" alt="Nature" style="width:100%">
<div class="w3-container">
<h3><b>TITLE HEADING</b></h3>
</div>
</div>
<div class="w3-container">
<h5>Title description, <span class="w3-opacity">April 7, 2014</span></h5>
<p>Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl. Sed mattis nunc id lorem euismod placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at. Phasellus sed ultricies mi non congue ullam corper. Praesent tincidunt
sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
<hr>
</div>
<br>
<!-- END w3-content -->
</div>
</body>.body {
text-align: center;
background-color: red;
height: 150px;
}
.container {
background-color: blue;
height: 50px;
display: flex;
}
.imgdiv {
background-color: green;
width: 50px;
height: 50px;
}
img {
height: 50px;
}
.textdiv {
background-color: yellow;
width: 100px;
height: 50px;
}
p {
padding: auto;
font-weight: bold;
}<div class="body">
<div class="container">
<div class="imgdiv">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRhWSuoV5RUZiv4vizlSTEFOJCuA6Db5nwvtA&usqp=CAU"
alt="alternatetext" />
</div>
<div class="textdiv">
<p>some text</p>
</div>
</div>
<p>some content here</p>
</div>
</div>