谢谢你的下水道。
我的问题:
我正在创建一个有文章的webiste,我必须使该网站响应。 我正在使用CSS网格为我的网站。 我在移动设备上出了点问题。
我有两种类型的文章(左边的图片和右边的图片)。 但在移动设备上查看时,这两张图片并不在文章下方。 从第一篇文章的图像应该在底部。
谢谢你的帮助!
null
#news_content {
padding: 215px 15px 0px 15px;
}
#news_content>.row {
grid-template-columns: repeat(12, 8.533333%);
}
#news_content>.row>.col-1 {
grid-column: span 6;
}
#news_content>.row>.col-1>.col-1-padding {
padding: 20px 0px 0px 30px;
}
#news_content>.row>.col-2 {
grid-column: span 6;
}
#news_content>.row>.col-2>.col-2-padding {
padding: 20px 0px 20px 30px;
}
@media (max-width: 720px) {
#news_content>.row>.col-1,
#news_content>.row>.col-2 {
grid-column: span 12;
}
}
@media (max-width: 720px) {
#news_content {
padding: 50px 45px 0px 15px;
}
}
<div id="news_content" class="grid">
<div class="row">
<div class="col-1">
<div class="col-1-padding">
<img src="https://via.placeholder.com/300x200" id="Image_style">
</div>
</div>
<div class="col-2">
<div class="col-2-padding">
<h1>Lorem Lorem?</h1>
<p class="news">
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem
Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</div>
</div>
</div>
</div>
<div id="news_content" class="grid">
<div class="row">
<div class="col-1">
<div class="col-1-padding">
<h1>Lorem Lorem?</h1>
<p class="news">
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p>
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem
Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</div>
</div>
<div class="col-2">
<div class="col-2-padding">
<img src="https://via.placeholder.com/300x200" id="Image_style">
</div>
</div>
</div>
</div>
null
<div id="news_content" class="grid">
<div class="row">
<div class="col-1">
<div class="col-1-padding">
<img src="img/poco.jpg" id="Image_style">
</div>
</div>
<div class="col-2">
<div class="col-2-padding">
<h1>Lorem Lorem?</h1>
<p class="news">
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</div>
</div>
</div>
</div>
<div id="news_content" class="grid">
<div class="row">
<div class="col-1">
<div class="col-1-padding">
<h1>Lorem Lorem?</h1>
<p class="news">
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p>
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</div>
</div>
<div class="col-2">
<div class="col-2-padding">
<img src="img/video.jpg" id="Image_style">
</div>
</div>
</div>
</div>
#news_content
{
padding: 215px 15px 0px 15px;
}
#news_content > .row
{
grid-template-columns: repeat(12, 8.533333%);
}
#news_content > .row > .col-1
{
grid-column: span 6;
}
#news_content > .row > .col-1 > .col-1-padding
{
padding: 20px 0px 0px 30px;
}
#news_content > .row > .col-2
{
grid-column: span 6;
}
#news_content > .row > .col-2 > .col-2-padding
{
padding: 20px 0px 20px 30px;
}
@media (max-width: 720px)
{
#news_content > .row > .col-1, #news_content > .row > .col-2
{
grid-column: span 12;
}
}
@media (max-width: 720px)
{
#news_content
{
padding: 50px 45px 0px 15px;
}
}