Question

我正在尝试调整我为移动/平板电脑观看而建立的网站。我目前有三个图像＆amp;除了＆＃39;对＆＃39;每个布局从左边的图像到右边的图像改变，然后是右边的图像和左边的图像。

我现在想对此进行调整，以便将旁边的部分包裹在每个相应的图像下以进行移动布局。我有点陷入困境，所以会欣赏实现我想要的布局的最佳实践。

以下是相应的代码段。（空格是图像出现的位置。）

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

如果您已准备好使用bootstrap进行响应式设计检查，请点击以下代码段，以便在media queries之后轻松解决您的问题。

<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>

package com.domain.subdomain;

public class Account {
    private Currency currency;

    public Account() {
    }

    public void setCurrency(Currency currency){
        this.currency = currency;
    }


    public static void main(String[] args) {
        System.out.println("Hello Account!");

    }
}

Answer 2

只需将此媒体查询添加到CSS的顶部：

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

Answer 3

您可以使用@media-queries来实现您尝试做的事情。我不得不稍微修改你的HTML，因为第二行中的图片出现在内容之后。

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

＆＃13;

.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;
  }
}

＆＃13;

<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>

＆＃13;

重新定位并排元素以实现响应式布局

3 个答案: