删除留在网络中的浮动
Remove Float left in web
所以我想让句子超出图片的时候不向左飘。这是结果
.content {
background-color: yellow;
padding: 20px;
float: left;
margin-bottom: 20px;
}
img {
max-height: 150px;
width: auto;
}
.image {
float: left;
margin-right: 20px;
height: 100%;
}
<div class="container">
<div class="content">
<div class="image">
<img src='https://img.freepik.com/free-photo/man-using-digital-tablet-psd-mockup-smart-technology_53876-110815.jpg?t=st=1652829422~exp=1652830022~hmac=e98e39d49f85486606e11eb17537e7b7c7cd562cc5c0f9fb743b4b15cc183eba&w=1380'></img>
</div>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia ducimus commodi explicabo rem debitis placeat natus possimus nostrum aliquid aperiam.
<br><br> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error, officia. Placeat illo tempora consequuntur repudiandae quasi sit delectus soluta. Recusandae deserunt aliquid reprehenderit asperiores enim quo itaque, nisi aut voluptatum odio
est cum laudantium eos vitae. Id voluptatibus temporibus mollitia libero dolore suscipit laudantium autem molestiae placeat. Optio quod dolorem, placeat autem nisi eius facilis necessitatibus non quasi, reprehenderit nemo enim! Saepe veniam, rem ut
distinctio facilis eaque enim deserunt?
</div>
<div class="content">
<div class="image">
<img src='https://img.freepik.com/free-photo/man-using-digital-tablet-psd-mockup-smart-technology_53876-110815.jpg?t=st=1652829422~exp=1652830022~hmac=e98e39d49f85486606e11eb17537e7b7c7cd562cc5c0f9fb743b4b15cc183eba&w=1380'></img>
</div>
<div class="sentence"></div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati dignissimos nisi soluta excepturi aliquid accusantium assumenda, ex inventore. Deserunt dolores, dolorum quibusdam eligendi perspiciatis similique vel possimus officia sint repellat omnis
reprehenderit suscipit deleniti id asperiores quidem accusamus natus blanditiis!
<br><br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi quibusdam necessitatibus quas? Consequatur repellendus non nam at eos, quaerat dolore asperiores amet id et facilis quae earum facere, eveniet quo. Vero perferendis dolorum nulla
labore ratione tempore vel! Culpa laudantium tempora saepe minus fugiat illo quis esse. Exercitationem, aspernatur doloribus?
<br><br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit voluptate iste, sint itaque cumque eaque minus impedit exercitationem architecto! Dolorum eum necessitatibus quidem repellat nam deleniti reprehenderit quos dicta, architecto cupiditate
neque, excepturi autem adipisci sint officiis sapiente. Quisquam ipsa delectus laboriosam est magni. Quisquam, laudantium! Aut id repellat nisi accusantium recusandae dolore labore! Harum quia accusantium dolorum officia provident quis vel repellat
eos corporis? Provident, aliquam eius dolores quibusdam ipsum eum, quo molestiae dolore, harum nihil perferendis! Incidunt quod sit ipsa qui eius, quas nihil fugiat temporibus odit repellat! Lorem ipsum dolor sit amet consectetur adipisicing elit.
At odit omnis excepturi ratione incidunt doloremque porro nobis magnam quia quasi.
</div>
</div>
有谁知道怎么让句子停留在红线位置？
使用网格。
.container {
background-color: yellow;
display: grid;
grid-template-columns: 1fr 3fr;
gap: 2em;
padding: 2em;
}
.container>* {
border: 1px dotted red;
}
img {
max-width: 100%;
}
<div class="container">
<div class="left-col">
<img src='https://img.freepik.com/free-photo/man-using-digital-tablet-psd-mockup-smart-technology_53876-110815.jpg?t=st=1652829422~exp=1652830022~hmac=e98e39d49f85486606e11eb17537e7b7c7cd562cc5c0f9fb743b4b15cc183eba&w=1380'></img>
</div>
<div class="right-col">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia ducimus commodi explicabo rem debitis placeat natus possimus nostrum aliquid aperiam.
<br><br>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error, officia. Placeat illo tempora consequuntur repudiandae quasi sit delectus soluta. Recusandae deserunt aliquid reprehenderit asperiores enim quo itaque, nisi aut voluptatum odio est cum laudantium eos vitae. Id voluptatibus temporibus mollitia libero dolore suscipit laudantium autem molestiae placeat. Optio quod dolorem, placeat autem nisi eius facilis necessitatibus non quasi, reprehenderit nemo enim! Saepe veniam, rem ut distinctio facilis eaque enim deserunt?
</div>
<div class="left-col">
<img src='https://img.freepik.com/free-photo/man-using-digital-tablet-psd-mockup-smart-technology_53876-110815.jpg?t=st=1652829422~exp=1652830022~hmac=e98e39d49f85486606e11eb17537e7b7c7cd562cc5c0f9fb743b4b15cc183eba&w=1380'></img>
</div>
<div class="right-col">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati dignissimos nisi soluta excepturi aliquid accusantium assumenda, ex inventore. Deserunt dolores, dolorum quibusdam eligendi perspiciatis similique vel possimus officia sint repellat omnis reprehenderit suscipit deleniti id asperiores quidem accusamus natus blanditiis!
<br><br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi quibusdam necessitatibus quas? Consequatur repellendus non nam at eos, quaerat dolore asperiores amet id et facilis quae earum facere, eveniet quo. Vero perferendis dolorum nulla labore ratione tempore vel! Culpa laudantium tempora saepe minus fugiat illo quis esse. Exercitationem, aspernatur doloribus?
<br><br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit voluptate iste, sint itaque cumque eaque minus impedit exercitationem architecto! Dolorum eum necessitatibus quidem repellat nam deleniti reprehenderit quos dicta, architecto cupiditate neque, excepturi autem adipisci sint officiis sapiente. Quisquam ipsa delectus laboriosam est magni. Quisquam, laudantium! Aut id repellat nisi accusantium recusandae dolore labore! Harum quia accusantium dolorum officia provident quis vel repellat eos corporis? Provident, aliquam eius dolores quibusdam ipsum eum, quo molestiae dolore, harum nihil perferendis! Incidunt quod sit ipsa qui eius, quas nihil fugiat temporibus odit repellat! Lorem ipsum dolor sit amet consectetur adipisicing elit. At odit omnis excepturi ratione incidunt doloremque porro nobis magnam quia quasi.
</div>
</div>
所以我想让句子超出图片的时候不向左飘。这是结果
.content {
background-color: yellow;
padding: 20px;
float: left;
margin-bottom: 20px;
}
img {
max-height: 150px;
width: auto;
}
.image {
float: left;
margin-right: 20px;
height: 100%;
}
<div class="container">
<div class="content">
<div class="image">
<img src='https://img.freepik.com/free-photo/man-using-digital-tablet-psd-mockup-smart-technology_53876-110815.jpg?t=st=1652829422~exp=1652830022~hmac=e98e39d49f85486606e11eb17537e7b7c7cd562cc5c0f9fb743b4b15cc183eba&w=1380'></img>
</div>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia ducimus commodi explicabo rem debitis placeat natus possimus nostrum aliquid aperiam.
<br><br> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error, officia. Placeat illo tempora consequuntur repudiandae quasi sit delectus soluta. Recusandae deserunt aliquid reprehenderit asperiores enim quo itaque, nisi aut voluptatum odio
est cum laudantium eos vitae. Id voluptatibus temporibus mollitia libero dolore suscipit laudantium autem molestiae placeat. Optio quod dolorem, placeat autem nisi eius facilis necessitatibus non quasi, reprehenderit nemo enim! Saepe veniam, rem ut
distinctio facilis eaque enim deserunt?
</div>
<div class="content">
<div class="image">
<img src='https://img.freepik.com/free-photo/man-using-digital-tablet-psd-mockup-smart-technology_53876-110815.jpg?t=st=1652829422~exp=1652830022~hmac=e98e39d49f85486606e11eb17537e7b7c7cd562cc5c0f9fb743b4b15cc183eba&w=1380'></img>
</div>
<div class="sentence"></div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati dignissimos nisi soluta excepturi aliquid accusantium assumenda, ex inventore. Deserunt dolores, dolorum quibusdam eligendi perspiciatis similique vel possimus officia sint repellat omnis
reprehenderit suscipit deleniti id asperiores quidem accusamus natus blanditiis!
<br><br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi quibusdam necessitatibus quas? Consequatur repellendus non nam at eos, quaerat dolore asperiores amet id et facilis quae earum facere, eveniet quo. Vero perferendis dolorum nulla
labore ratione tempore vel! Culpa laudantium tempora saepe minus fugiat illo quis esse. Exercitationem, aspernatur doloribus?
<br><br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit voluptate iste, sint itaque cumque eaque minus impedit exercitationem architecto! Dolorum eum necessitatibus quidem repellat nam deleniti reprehenderit quos dicta, architecto cupiditate
neque, excepturi autem adipisci sint officiis sapiente. Quisquam ipsa delectus laboriosam est magni. Quisquam, laudantium! Aut id repellat nisi accusantium recusandae dolore labore! Harum quia accusantium dolorum officia provident quis vel repellat
eos corporis? Provident, aliquam eius dolores quibusdam ipsum eum, quo molestiae dolore, harum nihil perferendis! Incidunt quod sit ipsa qui eius, quas nihil fugiat temporibus odit repellat! Lorem ipsum dolor sit amet consectetur adipisicing elit.
At odit omnis excepturi ratione incidunt doloremque porro nobis magnam quia quasi.
</div>
</div>
有谁知道怎么让句子停留在红线位置？
使用网格。
.container {
background-color: yellow;
display: grid;
grid-template-columns: 1fr 3fr;
gap: 2em;
padding: 2em;
}
.container>* {
border: 1px dotted red;
}
img {
max-width: 100%;
}
<div class="container">
<div class="left-col">
<img src='https://img.freepik.com/free-photo/man-using-digital-tablet-psd-mockup-smart-technology_53876-110815.jpg?t=st=1652829422~exp=1652830022~hmac=e98e39d49f85486606e11eb17537e7b7c7cd562cc5c0f9fb743b4b15cc183eba&w=1380'></img>
</div>
<div class="right-col">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia ducimus commodi explicabo rem debitis placeat natus possimus nostrum aliquid aperiam.
<br><br>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error, officia. Placeat illo tempora consequuntur repudiandae quasi sit delectus soluta. Recusandae deserunt aliquid reprehenderit asperiores enim quo itaque, nisi aut voluptatum odio est cum laudantium eos vitae. Id voluptatibus temporibus mollitia libero dolore suscipit laudantium autem molestiae placeat. Optio quod dolorem, placeat autem nisi eius facilis necessitatibus non quasi, reprehenderit nemo enim! Saepe veniam, rem ut distinctio facilis eaque enim deserunt?
</div>
<div class="left-col">
<img src='https://img.freepik.com/free-photo/man-using-digital-tablet-psd-mockup-smart-technology_53876-110815.jpg?t=st=1652829422~exp=1652830022~hmac=e98e39d49f85486606e11eb17537e7b7c7cd562cc5c0f9fb743b4b15cc183eba&w=1380'></img>
</div>
<div class="right-col">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati dignissimos nisi soluta excepturi aliquid accusantium assumenda, ex inventore. Deserunt dolores, dolorum quibusdam eligendi perspiciatis similique vel possimus officia sint repellat omnis reprehenderit suscipit deleniti id asperiores quidem accusamus natus blanditiis!
<br><br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi quibusdam necessitatibus quas? Consequatur repellendus non nam at eos, quaerat dolore asperiores amet id et facilis quae earum facere, eveniet quo. Vero perferendis dolorum nulla labore ratione tempore vel! Culpa laudantium tempora saepe minus fugiat illo quis esse. Exercitationem, aspernatur doloribus?
<br><br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit voluptate iste, sint itaque cumque eaque minus impedit exercitationem architecto! Dolorum eum necessitatibus quidem repellat nam deleniti reprehenderit quos dicta, architecto cupiditate neque, excepturi autem adipisci sint officiis sapiente. Quisquam ipsa delectus laboriosam est magni. Quisquam, laudantium! Aut id repellat nisi accusantium recusandae dolore labore! Harum quia accusantium dolorum officia provident quis vel repellat eos corporis? Provident, aliquam eius dolores quibusdam ipsum eum, quo molestiae dolore, harum nihil perferendis! Incidunt quod sit ipsa qui eius, quas nihil fugiat temporibus odit repellat! Lorem ipsum dolor sit amet consectetur adipisicing elit. At odit omnis excepturi ratione incidunt doloremque porro nobis magnam quia quasi.
</div>
</div>