img旁边的两个文本

Question

<div id="title_div">
        <h1 id="title_text">WIFI</h1>
    </div>

    <div id="container_connected_network">
        <h2>connected</h2>
        <div id="connected_network">
            <img id="connected_network_img" src="wifi_icon.png">
            <div id="content_connected_network">
                <h3>Test</h3>
                <h4>click for more</h4>
            </div>
        </div>
    </div>

    <div id="avaiable_networks_container">
        <h2>avaiable</h2>
        <div id="connected_network">
            <img id="connected_network_img" src="wifi_icon.png">
            <div id="content_connected_network">
                <h3>Test</h3>
                <h4>click for more</h4>
            </div>
        </div>
    </div>

<style type="text/css">
        body {
            background-color: #f2f2f2;
        }

        #title_div {
            position: absolute;
            top: 0px; left: 0px;
            width: 800px;

            text-align: center;

            background-color: #5ea77e;
        }
            #title_text {
                color: white;
            }

        #container_connected_network {
            position: absolute;
            top: 90px;
            width: 770px;
            padding-left: 10px;

            border: 3px solid #5ea77e;
        }
            #connected_network_img {
                height: 40px;

                margin-right: 10px;
                float: left;
            }
                #content_connected_network {
                    overflow: auto;
                }

        #avaiable_networks_container {
            position: absolute;
            top: 270px;
            width: 770px;
            padding-left: 10px;

            border: 3px solid #5ea77e;
        }
    </style>

如何获得img旁边的文本<h4>click for more</h4>？

我知道如何使用绝对定位进行操作，但是我认为这是最好的方法。

图片的高度必须为40px。

Answer 1

将标题和其他内容包装在另一个元素中，例如<div>，并用overflow: auto;触发一个新的block formatting context。

.preview__img {
  float: left;
  margin-right: 10px;
}

.preview__content {
  overflow: auto;
}

.preview__heading {
  margin: 0 0 0.5rem;
}

<div class="preview">
  <img class="preview__img" src="https://via.placeholder.com/40x40">
  <div class="preview__content">
    <h3 class="preview__heading">Heading</h3>
    <a href="#">Click for More</a>
    <p>Just for fun!</p>
  </div>
</div>

Answer 2

尝试一下：-

div#content_connected_network h4, h3 {
    margin: 0;
} 

输出为：-