英文:
How to put footer block at the same y-line as image?
问题
我使用自定义CSS制作新闻列表（我不使用任何Bootstrap或类似的库），并将图像放在左侧，内容放在右侧。此外，我需要在与图像相同的y轴线下面放置一个具有"footer-block"类的div。但结果有点不同：https://prnt.sc/KRY1kmwoUNHP
我预期在".footer-block"属性中设置以下内容：
height: 24px;
position:relative;
bottom:-24px;
会解决问题，但实际上并没有。
如何使用跨平台方法修复这个问题？
英文:
I make list of news with custom css(I do not use any bootstrap or similar library)
and with image at left side and content at right side. Also I need to put div with footer-block class
below the content at the same y-line as image.
But result is different a bit : https://prnt.sc/KRY1kmwoUNHP
I expected that setting in .footer-block properties
height: 24px;
position:relative;
bottom:-24px;
will make it, but it does not.
How to fix it with cross platform decision?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.news-block-wrapper {
news-block-wrapper
}
.news-title {
width: 1094px;
height: 24px;
top: 20px;
left: 440px;
font-size: 20px;
line-height: 24px;
color: #D4D4E1;
text-transform: uppercase;
}
.news-img {
width: 400px;
height: auto;
top: 20px;
left: 20px;
margin-right: 20px;
/*border: 2px dotted yellow;*/
}
.news-content-wrapper {
display: inline;
width: 1332px;
height: 48px;
top: 54px;
left: 440px;
text-align: left;
font-weight: 400;
font-size: 14px;
line-height: 24px;
color: #B0B0BD;
}
.img-left-float {
float: left !important;
}
.news-row {
margin-bottom: 20px !important;
border: 2px dotted yellow;
height: 100%;
}
.footer-block {
border: 2px dotted red;
height: 24px;
position: relative;
bottom: -24px;
}
.news-content {
margin: 0;
margin-bottom: 10px;
padding: 2px;
line-height: 1.6em;
text-align: left;
}
.clear {
clear: both;
}
<!-- language: lang-html -->
<div class="news-block-wrapper">
<div class="news-row">
<img src="https://loremflickr.com/860/640" class="img-left-float news-img" alt="Test news Maxime assumenda natus neque.">
<div class="news-content-wrapper">
<h5 class="news-title">
<a href="">
16=&gt;Test news Maxime assumenda natus neque.
</a>
</h5>
<p class="news-content">Non qui vel quia excepturi. Dolorum ut voluptatem neque accusamus voluptatum.
</p>
<div class="footer-block">
16=&gt;Links
</div>
</div>
<div class="clear"></div>
</div>
<div class="news-row">
<img src="https://loremflickr.com/640/360" class="img-left-float news-img" alt="Test news Magni vel et impedit hic.">
<div class="news-content-wrapper">
<h5 class="news-title">
<a href="">
2=&gt;Test news Magni vel et impedit hic.
</a>
</h5>
<p class="news-content">Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo
est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium. Repellat vero qui dolorem error
perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem
qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore.
Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium
adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit
voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores.
Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas
et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum
eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci
velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis
unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa
quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.
</p>
<div class="footer-block">
2=&gt;Links
</div>
</div>
<div class="clear"></div>
</div>
</div>
<!-- end snippet -->
答案1
得分: 1
这是你在寻找的吗？
我在.footer-block上应用了position: sticky和top: 100%，所以它被推到容器的底部。
如果你需要.footer-block元素与.news-content对齐，你可以应用以下样式：
.footer-block {
width: calc(100% - 404px); /* 100% of container - (img width (400px) + border of .footer-block (2px) */
margin-left: auto;
}
这只适用于链接必须与图像位于同一级别的布局。
英文:
Is this what you're looking for?
I applied position: sticky and top: 100% on .footer-block, so it's pushed all the way down to the bottom of the container.
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-css -->
.news-title {
width: 1094px;
height: 24px;
top: 20px;
left: 440px;
font-size: 20px;
line-height: 24px;
color: #D4D4E1;
text-transform: uppercase;
}
.news-img {
width: 400px;
height: auto;
top: 20px;
left: 20px;
margin-right: 20px;
/*border: 2px dotted yellow;*/
}
.news-content-wrapper {
display: inline;
width: 1332px;
height: 48px;
top: 54px;
left: 440px;
text-align: left;
font-weight: 400;
font-size: 14px;
line-height: 24px;
color: #B0B0BD;
}
.img-left-float {
float: left !important;
}
.news-row {
margin-bottom: 20px !important;
border: 2px dotted yellow;
height: 100%;
}
.footer-block {
border: 2px dotted red;
height: 24px;
/*position: relative;
bottom: -24px; */
position: sticky;
top: 100%;
}
.news-content {
margin: 0;
margin-bottom: 10px;
padding: 2px;
line-height: 1.6em;
text-align: left;
}
.clear {
clear: both;
}
<!-- language: lang-html -->
<div class="news-block-wrapper">
<div class="news-row">
<img src="https://loremflickr.com/860/640" class="img-left-float news-img" alt="Test news Maxime assumenda natus neque.">
<div class="news-content-wrapper">
<h5 class="news-title">
<a href="">
16=&gt;Test news Maxime assumenda natus neque.
</a>
</h5>
<p class="news-content">Non qui vel quia excepturi. Dolorum ut voluptatem neque accusamus voluptatum.
</p>
<div class="footer-block">
16=&gt;Links
</div>
</div>
<div class="clear"></div>
</div>
<div class="news-row">
<img src="https://loremflickr.com/640/360" class="img-left-float news-img" alt="Test news Magni vel et impedit hic.">
<div class="news-content-wrapper">
<h5 class="news-title">
<a href="">
2=&gt;Test news Magni vel et impedit hic.
</a>
</h5>
<p class="news-content">Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo
est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium. Repellat vero qui dolorem error
perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem
qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore.
Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium
adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit
voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores.
Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas
et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum
eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci
velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis
unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa
quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.
</p>
<div class="footer-block">
2=&gt;Links
</div>
</div>
<div class="clear"></div>
</div>
</div>
<!-- end snippet -->
I'm not sure whether or not you need the .footer-block-element to align with .news-content. If so, you can apply this:
.footer-block {
width: calc(100% - 404px); /* 100% of container - (img width (400px) + border of .footer-block (2px) */
margin-left: auto;
}
This would only work for the layout where the links must be on the same level as the image though.
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-css -->
.news-title {
width: 1094px;
height: 24px;
top: 20px;
left: 440px;
font-size: 20px;
line-height: 24px;
color: #D4D4E1;
text-transform: uppercase;
}
.news-img {
width: 400px;
height: auto;
top: 20px;
left: 20px;
margin-right: 20px;
/*border: 2px dotted yellow;*/
}
.news-content-wrapper {
display: inline;
width: 1332px;
height: 48px;
top: 54px;
left: 440px;
text-align: left;
font-weight: 400;
font-size: 14px;
line-height: 24px;
color: #B0B0BD;
}
.img-left-float {
float: left !important;
}
.news-row {
margin-bottom: 20px !important;
border: 2px dotted yellow;
height: 100%;
}
.footer-block {
border: 2px dotted red;
height: 24px;
/*position: relative;
bottom: -24px; */
position: sticky;
top: 100%;
max-width: calc(100% - 404px);
margin-left: auto;
}
.news-content {
margin: 0;
margin-bottom: 10px;
padding: 2px;
line-height: 1.6em;
text-align: left;
}
.clear {
clear: both;
}
<!-- language: lang-html -->
<div class="news-block-wrapper">
<div class="news-row">
<img src="https://loremflickr.com/860/640" class="img-left-float news-img" alt="Test news Maxime assumenda natus neque.">
<div class="news-content-wrapper">
<h5 class="news-title">
<a href="">
16=&gt;Test news Maxime assumenda natus neque.
</a>
</h5>
<p class="news-content">Non qui vel quia excepturi. Dolorum ut voluptatem neque accusamus voluptatum.
</p>
<div class="footer-block">
16=&gt;Links
</div>
</div>
<div class="clear"></div>
</div>
<div class="news-row">
<img src="https://loremflickr.com/640/360" class="img-left-float news-img" alt="Test news Magni vel et impedit hic.">
<div class="news-content-wrapper">
<h5 class="news-title">
<a href="">
2=&gt;Test news Magni vel et impedit hic.
</a>
</h5>
<p class="news-content">Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo
est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium. Repellat vero qui dolorem error
perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem
qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore.
Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium
adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit
voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores.
Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas
et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum
eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci
velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis
unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa
quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.
</p>
<div class="footer-block">
2=&gt;Links
</div>
</div>
<div class="clear"></div>
</div>
</div>
<!-- end snippet -->
答案2
得分: 0
.container{
display:flex;
}
.image img{
width:300px;
height:300px;
}
.news-title {
width: 1094px;
height: 24px;
top: 20px;
left: 440px;
font-size: 20px;
line-height: 24px;
color: #D4D4E1;
text-transform: uppercase;
}
.news-content-wrapper {
display: inline;
height: 300px;
margin-left:10px;
text-align: left;
font-weight: 400;
font-size: 14px;
line-height: 24px;
color: #B0B0BD;
}
.news{
display:flex;
flex-direction:column;
justify-content:space-between;
}
<div class="container">
<div class="image">
<img src="https://loremflickr.com/860/640" alt="Test news Maxime assumenda natus neque.">
</div>
<div class="news-content-wrapper news">
<div>
<h5 class="news-title">
<a href="">
16=&gt;Test news Maxime assumenda natus neque.
</a>
</h5>
<p class="news-content">Non qui vel quia excepturi. Dolorum ut voluptatem neque accusamus voluptatum. Libero sit quae fugit sequi. Eum consequuntur delectus magni fugit adipisci. Consequatur velit consectetur omnis inventore tenetur. Voluptas nesciunt voluptatem perferendis consequatur fugit id sit magni. Cupiditate dolor modi ipsum eum similique. Neque vitae minus vel velit dolores blanditiis porro. Occaecati odit sequi et ut dolore autem.</p>
</div>
<div class="footer-block">
16=&gt;Links
</div>
</div>
</div>
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.container{
display:flex;
}
.image img{
width:300px;
height:300px;
}
.news-title {
width: 1094px;
height: 24px;
top: 20px;
left: 440px;
font-size: 20px;
line-height: 24px;
color: #D4D4E1;
text-transform: uppercase;
}
.news-content-wrapper {
display: inline;
height: 300px;
margin-left:10px;
text-align: left;
font-weight: 400;
font-size: 14px;
line-height: 24px;
color: #B0B0BD;
}
.news{
display:flex;
flex-direction:column;
justify-content:space-between;
}
<!-- language: lang-html -->
<div class="container">
<div class="image">
<img src="https://loremflickr.com/860/640" alt="Test news Maxime assumenda natus neque.">
</div>
<div class="news-content-wrapper news">
<div >
<h5 class="news-title">
<a href="">
16=&gt;Test news Maxime assumenda natus neque.
</a>
</h5>
<p class="news-content">Non qui vel quia excepturi. Dolorum ut voluptatem neque accusamus voluptatum. Libero sit quae fugit sequi. Eum consequuntur delectus magni fugit adipisci. Consequatur velit consectetur omnis inventore tenetur. Voluptas nesciunt voluptatem perferendis consequatur fugit id sit magni. Cupiditate dolor modi ipsum eum similique. Neque vitae minus vel velit dolores blanditiis porro. Occaecati odit sequi et ut dolore autem.
</p>
</div>
<div class="footer-block">
16=&gt;Links
</div>
</div>
</div>
<!-- end snippet -->
答案3
得分: 0
我将页脚块移动到清除div后面，并删除了bottom属性。现在看起来不错。
.news-block-wrapper {
news-block-wrapper
}
.news-title {
width: 1094px;
height: 24px;
top: 20px;
left: 440px;
font-size: 20px;
line-height: 24px;
color: #D4D4E1;
text-transform: uppercase;
}
.news-img {
width: 400px;
height: auto;
top: 20px;
left: 20px;
margin-right: 20px;
/*border: 2px dotted yellow;*/
}
.news-content-wrapper {
display: inline;
width: 1332px;
height: 48px;
top: 54px;
left: 440px;
text-align: left;
font-weight: 400;
font-size: 14px;
line-height: 24px;
color: #B0B0BD;
}
.img-left-float {
float: left !important;
}
.news-row {
margin-bottom: 20px !important;
border: 2px dotted yellow;
height: 100%;
}
.footer-block {
border: 2px dotted red;
height: 24px;
position: relative;
}
.news-content {
margin: 0;
margin-bottom: 10px;
padding: 2px;
line-height: 1.6em;
text-align: left;
}
.clear {
clear: both;
}
<div class="news-block-wrapper">
<div class="news-row">
<img src="https://loremflickr.com/860/640" class="img-left-float news-img" alt="Test news Maxime assumenda natus neque.">
<div class="news-content-wrapper">
<h5 class="news-title">
<a href="">
16=>Test news Maxime assumenda natus neque.
</a>
</h5>
<p class="news-content">Non qui vel quia excepturi. Dolorum ut voluptatem neque accusamus voluptatum.
</p>
</div>
<div class="clear"></div>
<div class="footer-block">
16=>Links
</div>
</div>
<div class="news-row">
<img src="https://loremflickr.com/640/360" class="img-left-float news-img" alt="Test news Magni vel et impedit hic.">
<div class="news-content-wrapper">
<h5 class="news-title">
<a href="">
2=>Test news Magni vel et impedit hic.
</a>
</h5>
<p class="news-content">Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo
est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium. Repellat vero qui dolorem error
perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem
qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore.
Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium
adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit
voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores.
Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas
et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum
eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci
velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis
unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa
quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.
</p>
</div>
<div class="clear"></div>
<div class="footer
<details>
<summary>英文:</summary>
I moved the footer block after the clear div and removed the `bottom` property. It looks good now.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.news-block-wrapper {
news-block-wrapper
}
.news-title {
width: 1094px;
height: 24px;
top: 20px;
left: 440px;
font-size: 20px;
line-height: 24px;
color: #D4D4E1;
text-transform: uppercase;
}
.news-img {
width: 400px;
height: auto;
top: 20px;
left: 20px;
margin-right: 20px;
/*border: 2px dotted yellow;*/
}
.news-content-wrapper {
display: inline;
width: 1332px;
height: 48px;
top: 54px;
left: 440px;
text-align: left;
font-weight: 400;
font-size: 14px;
line-height: 24px;
color: #B0B0BD;
}
.img-left-float {
float: left !important;
}
.news-row {
margin-bottom: 20px !important;
border: 2px dotted yellow;
height: 100%;
}
.footer-block {
border: 2px dotted red;
height: 24px;
position: relative;
}
.news-content {
margin: 0;
margin-bottom: 10px;
padding: 2px;
line-height: 1.6em;
text-align: left;
}
.clear {
clear: both;
}
<!-- language: lang-html -->
<div class="news-block-wrapper">
<div class="news-row">
<img src="https://loremflickr.com/860/640" class="img-left-float news-img" alt="Test news Maxime assumenda natus neque.">
<div class="news-content-wrapper">
<h5 class="news-title">
<a href="">
16=&gt;Test news Maxime assumenda natus neque.
</a>
</h5>
<p class="news-content">Non qui vel quia excepturi. Dolorum ut voluptatem neque accusamus voluptatum.
</p>
</div>
<div class="clear"></div>
<div class="footer-block">
16=&gt;Links
</div>
</div>
<div class="news-row">
<img src="https://loremflickr.com/640/360" class="img-left-float news-img" alt="Test news Magni vel et impedit hic.">
<div class="news-content-wrapper">
<h5 class="news-title">
<a href="">
2=&gt;Test news Magni vel et impedit hic.
</a>
</h5>
<p class="news-content">Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo
est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium. Repellat vero qui dolorem error
perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem
qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore.
Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium
adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit
voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores.
Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas
et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum
eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci
velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis
unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa
quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.
</p>
</div>
<div class="clear"></div>
<div class="footer-block">
2=&gt;Links
</div>
</div>
</div>
<!-- end snippet -->
</details>
# 答案4
**得分**: 0
我强烈建议您学习并使用 `display: grid;` 和 `display: flex` 来使您的下一个网页更具响应性。
但是，这里有一个简单的解决方案，无需更改您的HTML，只需要更改您的CSS。
我所做的更改如下：
```css
.news-row {
margin-bottom: 20px !important;
border: 2px dotted yellow;
height: 100%;
position: relative;
padding-bottom: 32px;
}
.footer-block {
border: 2px dotted red;
height: 24px;
position: absolute;
bottom: 0;
}
以下是代码运行效果：
<div class="news-block-wrapper">
<div class="news-row">
<img src="https://loremflickr.com/860/640" class="img-left-float news-img" alt="Test news Maxime assumenda natus neque.">
<div class="news-content-wrapper">
<h5 class="news-title">
<a href="">16=&gt;Test news Maxime assumenda natus neque.</a>
</h5>
<p class="news-content">Non qui vel quia excepturi. Dolorum ut voluptatem neque accusamus voluptatum.</p>
<div class="footer-block">16=&gt;Links</div>
</div>
<div class="clear"></div>
</div>
<div class="news-row">
<img src="https://loremflickr.com/640/360" class="img-left-float news-img" alt="Test news Magni vel et impedit hic.">
<div class="news-content-wrapper">
<h5 class="news-title">
<a href="">2=&gt;Test news Magni vel et impedit hic.</a>
</h5>
<p class="news-content">Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium. Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.</p>
<div class="footer-block">2=&gt;Links</div>
</div>
<div class="clear"></div>
</div>
</div>
希望这有所帮助。
英文:
I strongly recommend you to study and use display: grid; and display: flex to mount your next webpages to be more responsive.
But here is an easy solution to your problem without need to change your HTML, you only need to change your CSS.
The points i've changed were:
.news-row {
margin-bottom: 20px !important;
border: 2px dotted yellow;
height: 100%;
}
.footer-block {
border: 2px dotted red;
height: 24px;
position: relative;
bottom: -24px;
}
to:
.news-row {
margin-bottom: 20px !important;
border: 2px dotted yellow;
height: 100%;
position: relative;
padding-bottom: 32px;
}
.footer-block {
border: 2px dotted red;
height: 24px;
position: absolute;
bottom: 0;
}
Here is the code running:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.news-block-wrapper {
news-block-wrapper
}
.news-title {
width: 1094px;
height: 24px;
top: 20px;
left: 440px;
font-size: 20px;
line-height: 24px;
color: #D4D4E1;
text-transform: uppercase;
}
.news-img {
width: 400px;
height: auto;
top: 20px;
left: 20px;
margin-right: 20px;
/*border: 2px dotted yellow;*/
}
.news-content-wrapper {
display: inline;
width: 1332px;
height: 48px;
top: 54px;
left: 440px;
text-align: left;
font-weight: 400;
font-size: 14px;
line-height: 24px;
color: #B0B0BD;
}
.img-left-float {
float: left !important;
}
.news-row {
margin-bottom: 20px !important;
border: 2px dotted yellow;
height: 100%;
position: relative;
padding-bottom: 32px;
}
.footer-block {
border: 2px dotted red;
height: 24px;
position: absolute;
bottom: 0;
}
.news-content {
margin: 0;
margin-bottom: 10px;
padding: 2px;
line-height: 1.6em;
text-align: left;
}
.clear {
clear: both;
}
<!-- language: lang-html -->
<div class="news-block-wrapper">
<div class="news-row">
<img src="https://loremflickr.com/860/640" class="img-left-float news-img" alt="Test news Maxime assumenda natus neque.">
<div class="news-content-wrapper">
<h5 class="news-title">
<a href="">
16=&gt;Test news Maxime assumenda natus neque.
</a>
</h5>
<p class="news-content">Non qui vel quia excepturi. Dolorum ut voluptatem neque accusamus voluptatum.
</p>
<div class="footer-block">
16=&gt;Links
</div>
</div>
<div class="clear"></div>
</div>
<div class="news-row">
<img src="https://loremflickr.com/640/360" class="img-left-float news-img" alt="Test news Magni vel et impedit hic.">
<div class="news-content-wrapper">
<h5 class="news-title">
<a href="">
2=&gt;Test news Magni vel et impedit hic.
</a>
</h5>
<p class="news-content">Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo
est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium. Repellat vero qui dolorem error
perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem
qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore.
Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium
adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit
voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores.
Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas
et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum
eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci
velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis
unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa
quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.
</p>
<div class="footer-block">
2=&gt;Links
</div>
</div>
<div class="clear"></div>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论