How to align the text as the same row of the picture?-CodePudding

Learning CSS, this is the sample code. The text block "TITLE HEADING" is behind the picture, how to move it to the same row as the picture ?

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 >
  <!-- 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  style="max-width:1400px">
    <!-- Header -->
    <header >
      <h1><b>MY BLOG</b></h1>
      <p>Welcome to the blog of <span >unknown</span></p>
    </header>
    <div >
      <!-- Blog entry -->
      <div >
        <img src="/w3images/woods.jpg" alt="Nature" style="width:100%">
        <div >
          <h3><b>TITLE HEADING</b></h3>
          <h5>Title description, <span >April 7, 2014</span></h5>
        </div>
        <div >
          <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>

CodePudding user response：

Nest those two elements in a parent .wrapper and use 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 >
  <!-- 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  style="max-width:1400px">
    <!-- Header -->
    <header >
      <h1><b>MY BLOG</b></h1>
      <p>Welcome to the blog of <span >unknown</span></p>
    </header>
    <div >
      <!-- Blog entry -->
      <div >
        <div >
          <img src="https://dummyimage.com/600x400/000/fff" alt="Nature" style="width:100%">
          <div >
            <h3><b>TITLE HEADING</b></h3>
          </div>
        </div>
        <div >
          <h5>Title description, <span >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>

CodePudding user response：

 .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 >
    <div >
        <div >
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRhWSuoV5RUZiv4vizlSTEFOJCuA6Db5nwvtA&usqp=CAU"
                alt="alternatetext" />
        </div>

        <div >
            <p>some text</p>
        </div>
    </div>

    <p>some content here</p>
</div>

  
</div>