Question

我很困惑如何使这段代码响应。请查看以下示例并告诉我们。

＆＃13;

#appalign{font-family:"montserrat-regular",sans-serif;margin-left:32%;margin-right:10%;text-align:justify;text-justify:inter-word}#appalign1{font-family:"montserrat-regular",sans-serif;margin-right:55%;text-align:justify;text-justify:inter-word}

#appalign2{font-family:"montserrat-regular",sans-serif;margin-left:55%;margin-right:%;margin-top:-10%;text-align:justify;text-justify:inter-word}

＆＃13;

<div id="appalign1">
  <p style="color: black">We believe in the power of a relationship – not just a relationship between you and us but with your customers as well. We work with you to deliver your message so that it captivates your audience and Target Group.<span style="font-weight:bold;color:black;"><font size="4"> We help you develop the right look, feel and personality</font></span> – a different<span style="font-weight:bold;color:black;"><font size="4"> brand image</font></span> that allows you to stand apart in the crowded market and above all get noticed. We make things simple and focus more on giving personal and effective customer service to you.</p>
</div>
<div id="appalign2">
  <p style="color: black">We provide<span style="font-weight:bold;color:black;"><font size="4"> advertising solutions</font></span> that integrates with your marketing to bring you effective results. We harness the power of new media to build a strong brand and till we are convinced about one, we won’t recommend it to you. We use a mix of<span style="font-weight:bold;color:black;"><font size="4"> online, print, email, and social media</font></span> channels to tell your brand's story in a way that resonates with customers and forms lasting bonds.</p>
</div>

＆＃13;

Codepen

Answer 1

你去吧。你没有使用漂浮物等等。我已经为你完成了它。

<div id="appalign1">
  <p style="color: black">We believe in the power of a relationship – not just a relationship between you and us but with your customers as well. We work with you to deliver your message so that it captivates your audience and Target Group.<span style="font-weight:bold;color:black;"><font size="4"> We help you develop the right look, feel and personality</font></span> – a different<span style="font-weight:bold;color:black;"><font size="4"> brand image</font></span> that allows you to stand apart in the crowded market and above all get noticed. We make things simple and focus more on giving personal and effective customer service to you.</p>
</div>
<div id="appalign2">
  <p style="color: black">We provide<span style="font-weight:bold;color:black;"><font size="4"> advertising solutions</font></span> that integrates with your marketing to bring you effective results. We harness the power of new media to build a strong brand and till we are convinced about one, we won’t recommend it to you. We use a mix of<span style="font-weight:bold;color:black;"><font size="4"> online, print, email, and social media</font></span> channels to tell your brand's story in a way that resonates with customers and forms lasting bonds.</p>
</div>

#appalign1 , #appalign2{float:left;width:50%;padding:0 20px;box-sizing: border-box;}

@media( max-width: 640px ) {
  #appalign1 , #appalign2 { width: 100%; }
}

https://codepen.io/anon/pen/aEEmOp

Answer 2

最简单的方法是添加一个容器并在其上应用display:flex，并避免使用不必要的CSS。

如果需要，您可以使用媒体查询切换小屏幕的方向。

您必须在CSS文件中移动所有内联样式，并删除使用过时标记，如font

＆＃13;

.container {
  display: flex;
}

.appalign {
  font-family: "montserrat-regular", sans-serif;
  margin: 10px;
  text-align: justify;
  text-justify: inter-word
}

@media all and ( max-width: 660px) {
  .container {
    flex-direction: column;
  }
}

＆＃13;

<div class="container">
  <div class="appalign">
    <p style="color: black">We believe in the power of a relationship – not just a relationship between you and us but with your customers as well. We work with you to deliver your message so that it captivates your audience and Target Group.<strong> We help you develop the right look, feel and personality</strong>      – a different<strong> brand image</strong> that allows you to stand apart in the crowded market and above all get noticed. We make things simple and focus more on giving personal and effective
      customer service to you.</p>
  </div>
  <div class="appalign">
    <p>We provide<strong> advertising solutions</strong> that integrates with your marketing to bring you effective results. We harness the power of new media to build a strong brand and till we are
      convinced about one, we won’t recommend it to you. We use a mix of<strong> online, print, email, and social media</strong> channels to tell your brand's story in a way that resonates with customers
      and forms lasting bonds.</p>
  </div>
</div>

＆＃13;

Answer 3

我刚刚发现使用大众单位是可行的。它们是与设置视口宽度相关联的单位。有一些缺点，例如缺乏传统的浏览器支持，但这绝对值得认真考虑使用。此外，您仍然可以为旧浏览器提供后备支持，如下所示：

p 
{
font-size: 30px;
font-size: 3.5vw;
}

https://css-tricks.com/viewport-sized-typography/

Answer 4

请使用此css工作正常。

 * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    *:before,
    *:after {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    #appalign1{font-family:"montserrat-regular",sans-serif;width:50%;float:left;text-align:justify;text-justify:inter-word;padding-right:1%;}
    #appalign2{font-family:"montserrat-regular",sans-serif;width:50%;float:left;text-align:justify;text-justify:inter-word;}

如何制作自适应内容

4 个答案: