为响应式布局重新定位并排元素

我正在尝试改编我为移动/平板电脑查看而构建的网站。我现在有三个图像&撇开'对'，其中每个的布局从左侧的图像改变到右侧，然后在右侧和左侧的图像。为响应式布局重新定位并排元素

我现在想调整这一点，以便在移动布局的每个相应的图像下方的旁边部分。我遇到了一些困难，所以希望能够实现我想要的布局的最佳实践。

下面是相应的代码片段。（空白空间是图像出现在那里。）

.about-text { 
 
    padding: 5% 5% 0 5%; 
 
} 
 

 
.def-width { 
 
    width: 50%; 
 
} 
 

 
.table { 
 
    display: table; 
 
} 
 

 
#experience article { 
 
    float: left; 
 
} 
 

 
#experience aside { 
 
    float: right; 
 
} 
 

 
#gas-safe article { 
 
    float: left; 
 
} 
 

 
#gas-safe aside { 
 
    float: right; 
 
} 
 

 
#gas-safe a { 
 
    color: #4E6E9B; 
 
    border-bottom: 1px dotted #4E6E9B; 
 
} 
 

 
#quality article { 
 
    float: left; 
 
} 
 

 
#quality aside { 
 
    float: right; 
 
} 
 

 
#to-top { 
 
    display: block; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    color: #4E6E9B; 
 
} 
 

 
#to-top i { 
 
    font-size: 50px; 
 
    text-align: center; 
 
} 
 

 
#to-top:hover { 
 
    color: #fff; 
 
}

<div class="alt-color"> 
 
    <section class="table" id="experience"> 
 
    <article class="def-width"> 
 
     <img src="img/boiler-commission-scaled.jpg" class="about-img"> 
 
    </article> 
 
    <aside class="about-text def-width"> 
 
     <h2>34 Years Experience</h2> 
 
     <p>Wayne is proud to have 34 years of experience in the gas engineering industry after having formerly completed a 3 year apprenticeship with British Gas.</p> 
 
    </aside> 
 

 
    </section> 
 

 
    <section class="table" id="gas-safe"> 
 

 
    <article class="about-text def-width"> 
 
     <h2>Gas Safe Accredited</h2> 
 
     <p>Safety always comes first. That's why we are trained to conform with the latest 'Gas Safe Register' standards. 
 
     </p><br> 
 

 
     <a href="https://www.gassaferegister.co.uk/find-an-engineer/check-a-business/?id=Wk%2biWbZCWcWz04dI3rDbQA%3d%3d" target="_blank">Check our Gas Safe Registration</a> 
 

 
    </article> 
 
    <aside class="def-width"> 
 
     <img src="img/radiator-fitting-scaled.jpg" class="about-img"> 
 
    </aside> 
 

 
    </section> 
 

 
    <section class="table" id="quality"> 
 
    <article class="def-width"> 
 
     <img src="img/gas-engineer-scaled.jpg" class="about-img"> 
 
    </article> 
 
    <aside class="about-text def-width"> 
 
     <h2>Quality. Without Compromise.</h2> 
 
     <p>Your central heating system is a big investment. We promise to only use industry leading products and install these with quality in mind; no corner cutting.</p> 
 
    </aside> 
 
    </section> 
 

 
    <a id="to-top" href="index.html"> 
 
    <i class="fa fa-arrow-circle-up"></i> 
 
    </a> 
 

 
</div>

来源

2017-10-19 c.gooderham94

你想使用[CSS @media查询（https://www.w3schools.com/css/css_rwd_mediaqueries.asp）为更好的RWD – cometguy

当你谈论响应式设计，你应该使用bootstrap！ –

目前还不清楚你想做什么... – DaFois

如果你准备使用bootstrap为响应式设计检查以下片断，这与出media queries轻松解决你的问题。

.about-text { 
 
    padding: 5% 5% 0 5%; 
 
} 
 

 
#gas-safe a { 
 
    color: #4E6E9B; 
 
    border-bottom: 1px dotted #4E6E9B; 
 
} 
 

 
#to-top { 
 
    display: block; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    color: #4E6E9B; 
 
} 
 

 
#to-top i { 
 
    font-size: 50px; 
 
    text-align: center; 
 
} 
 

 
#to-top:hover { 
 
    color: #fff; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container alt-color"> 
 
    <div class="row"> 
 
    <section id="experience"> 
 
     <div class="col-md-6 col-sm-6 col-xs-12"> 
 
     <article class="def-width"> 
 
      <img src="img/boiler-commission-scaled.jpg" class="about-img"> 
 
     </article> 
 
     </div> 
 
     <div class="col-md-6 col-sm-6 col-xs-12"> 
 
     <aside class="about-text def-width"> 
 
      <h2>34 Years Experience</h2> 
 
      <p>Wayne is proud to have 34 years of experience in the gas engineering industry after having formerly completed a 3 year apprenticeship with British Gas.</p> 
 
     </aside> 
 
     </div> 
 
    </section> 
 
    </div> 
 
    <div class="row"> 
 
    <section id="gas-safe"> 
 
     <div class="col-md-6 col-sm-6 col-xs-12"> 
 
     <article class="about-text def-width"> 
 
      <h2>Gas Safe Accredited</h2> 
 
      <p>Safety always comes first. That's why we are trained to conform with the latest 'Gas Safe Register' standards. 
 
      </p><br> 
 

 
      <a href="https://www.gassaferegister.co.uk/find-an-engineer/check-a-business/?id=Wk%2biWbZCWcWz04dI3rDbQA%3d%3d" target="_blank">Check our Gas Safe Registration</a> 
 

 
     </article> 
 
     </div> 
 
     <div class="col-md-6 col-sm-6 col-xs-12"> 
 
     <aside class="def-width"> 
 
      <img src="img/radiator-fitting-scaled.jpg" class="about-img"> 
 
     </aside> 
 
     </div> 
 

 
    </section> 
 
    </div> 
 
    <div class="row"> 
 
    <section id="quality"> 
 
     <div class="col-md-6 col-sm-6 col-xs-12"> 
 
     <article class="def-width"> 
 
      <img src="img/gas-engineer-scaled.jpg" class="about-img"> 
 
     </article> 
 
     </div> 
 
     <div class="col-md-6 col-sm-6 col-xs-12"> 
 
     <aside class="about-text def-width"> 
 
      <h2>Quality. Without Compromise.</h2> 
 
      <p>Your central heating system is a big investment. We promise to only use industry leading products and install these with quality in mind; no corner cutting.</p> 
 
     </aside> 
 
     </div> 
 
    </section> 
 
    </div> 
 
    <a id="to-top" href="index.html"> 
 
    <i class="fa fa-arrow-circle-up"></i> 
 
    </a> 
 

 
</div>

来源

2017-10-19 09:25:31

Bootstrap本身使用@media查询。虽然使用Bootstrap确实是一个很好的解决方案，它使生活更轻松，但有时我们可以避免它（如果我们需要更少的功能，还有其他更轻的库）。 – cometguy

当然，我接受所有响应库使用媒体查询。我建议引导，因为它广泛使用和高度浏览器支持。 –

谢谢你的回答！这正是我想要实现的。因为我只是一个初学者，所以我还没有研究bootstrap，但是，检查了各种网站源代码后，bootstrap的使用现在看起来很熟悉。这在网络上通常用于一系列不同的专业网站吗？我将开始对此进行一些研究！ –

这个媒体查询只需添加到您的CSS的顶部：

@media screen and (max-width: 800px){ 
    .about-text.def-width { 
    width: 100%; 
    } 
    aside { 
    float: left !important; 
    } 
}

来源

2017-10-19 09:27:37 alc

这似乎不会对输出结果产生任何影响。使用引导程序已被提出，尽管它似乎完美工作。尽管我非常感谢你的帮助！ –

你可以达到你想要使用@media-queries做什么。我不得不稍微修改你的HTML，因为第二行的图片出现在内容之后。

目前，它被设置为在800px上切换布局，但是您可以通过修改CSS中的max-width值来轻松进行修改。

.about-text { 
 
    padding: 5% 5% 0 5%; 
 
} 
 

 
.def-width { 
 
    width: 50%; 
 
} 
 

 
.table { 
 
    display: table; 
 
} 
 

 
#experience article { 
 
    float: left; 
 
} 
 

 
#experience aside { 
 
    float: right; 
 
} 
 

 
#gas-safe article { 
 
    float: left; 
 
} 
 

 
#gas-safe aside { 
 
    float: right; 
 
} 
 

 
#gas-safe a { 
 
    color: #4E6E9B; 
 
    border-bottom: 1px dotted #4E6E9B; 
 
} 
 

 
#quality article { 
 
    float: left; 
 
} 
 

 
#quality aside { 
 
    float: right; 
 
} 
 

 
#to-top { 
 
    display: block; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    color: #4E6E9B; 
 
} 
 

 
#to-top i { 
 
    font-size: 50px; 
 
    text-align: center; 
 
} 
 

 
#to-top:hover { 
 
    color: #fff; 
 
} 
 

 
@media (min-width: 800px) { 
 
    .hide-desktop { 
 
display: none; 
 
    } 
 
} 
 

 
@media (max-width: 800px) { 
 
    .hide-mobile { 
 
display: none; 
 
    } 
 
    #gas-safe article { 
 
float: none; 
 
width: 100%; 
 
text-align: center; 
 
    } 
 
    #experience article, 
 
    .table aside { 
 
float: none !important; 
 
width: 100%; 
 
text-align: center; 
 
    } 
 
    #quality article { 
 
float: none; 
 
width: 100%; 
 
text-align: center; 
 
    } 
 
}

<div class="alt-color"> 
 
    <section class="table" id="experience"> 
 
<article class="def-width"> 
 
    <img src="http://via.placeholder.com/300x200" class="about-img"> 
 
</article> 
 
<aside class="about-text def-width"> 
 
    <h2>34 Years Experience</h2> 
 
    <p>Wayne is proud to have 34 years of experience in the gas engineering industry after having formerly completed a 3 year apprenticeship with British Gas.</p> 
 
</aside> 
 

 
    </section> 
 

 
    <section class="table" id="gas-safe"> 
 
<article class="def-width hide-desktop"> 
 
    <img src="http://via.placeholder.com/300x200" class="about-img"> 
 
</article> 
 
<article class="about-text def-width"> 
 
    <h2>Gas Safe Accredited</h2> 
 
    <p>Safety always comes first. That's why we are trained to conform with the latest 'Gas Safe Register' standards. 
 
    </p> 
 
    <br> 
 

 
    <a href="https://www.gassaferegister.co.uk/find-an-engineer/check-a-business/?id=Wk%2biWbZCWcWz04dI3rDbQA%3d%3d" target="_blank">Check our Gas Safe Registration</a> 
 

 
</article> 
 
<aside class="def-width hide-mobile"> 
 
    <img src="http://via.placeholder.com/300x200" class="about-img"> 
 
</aside> 
 

 
    </section> 
 

 
    <section class="table" id="quality"> 
 
<article class="def-width"> 
 

 
    <img src="http://via.placeholder.com/300x200" class="about-img"> 
 
</article> 
 
<aside class="about-text def-width"> 
 
    <h2>Quality. Without Compromise.</h2> 
 
    <p>Your central heating system is a big investment. We promise to only use industry leading products and install these with quality in mind; no corner cutting.</p> 
 
</aside> 
 
    </section> 
 

 
    <a id="to-top" href="index.html"> 
 
<i class="fa fa-arrow-circle-up"></i> 
 
    </a> 
 

 
</div>

来源

2017-10-19 09:33:57

为响应式布局重新定位并排元素

回答

相关问题