如何使用 html 代码制作响应框？

Question

在我的博文中，我制作了带有图片和文字的盒子。
它们在移动设备上看起来很糟糕，但在 PC 上运行却完全正常。

所以我正在尝试使用 html 代码制作一个在移动和 PC 环境下看起来都不错的盒子。但是好像是'using px or a percentage does not help'！！下面我会更详细的解释我的问题！

第一个问题：文本在移动设备上开箱即用

开箱即用的问题图片（在移动设备上）文本：

盒子应该看起来像这样（在 PC 上）：一个完美的盒子，包括文本和图片2

制作这个盒子的html代码如下：

<!DOCTYPE html>
<div style="height:300px; width:400px; border: 5px outset #000000;
  box-shadow:5px 5px 15px #000808;background-color:rgb(249,249,249);">

<html>
 <a href="http://www.yes24.com/24/goods/42487097?scode=029">
 <img src="http://image.yes24.com/momo/TopCate1281/MidCate009/128080813.jpg" 
  height = "300px" align="left"/><br>

<body>
  <strong>디지털 노마드(도유진 저)</strong><br>
  출판 : 남해의봄날<br>
  발매 : 2017.06.10<br>
</body>
</html>
</div>

如您所见，问题是位于图片右侧的文本被推到了手机屏幕的底部。然后文本变得混乱，变得不可读。

我已经使用px 对盒子的高度和宽度进行了编程。我也用 px 来写盒子的边框。

我已经尝试过使用 %,rem,em 等几种不同的方法在我的博文中制作方框，但它们在移动环境中仍然不起作用。我如何编写代码才能使它们在 PC 和移动设备上看起来都很好？

问题二（类似问题）：手机看不到

问题图片（手机端）：一张图片右端被截断了

盒子应该是这样的（在PC端）：你可以看到全貌

<!DOCTYPE html>
<div style="width:480px; border: 5px outset #000000; height: 
 auto;box-shadow:7px 7px 20px #000808;background-color:rgb(249,249,249);">

<html>
  <a href="http://aictnews.blogspot.kr/2013/08/blog-post_31.html">
  <img src="http://2.bp.blogspot.com/-v9CzVdQnsYw/UibtvHFD18I/AAAAAAAABBI/
   X-rjZWuarII/s1600/bongwon+suh.png" width="480px" align="top"/><br>

<body>
  <p style="width:470px;"><strong>""이제 한우물만 파서는 안 돼"</strong><br></p>
  <p style="width:470px;">"1990년대까지는 넓게 알되 한 분야에 능통한 'T'형"</p>
</body>
</html>
</div>

因为我用"px"做了一个盒子，所以盒子里的图片在手机屏幕上显示时右端掉了。

非常感谢任何解决此问题的帮助或建议。

Answer 1

您需要使用 max-width 而不是 width 然后使宽度始终为 100%。使用此配置，您将在桌面和移动设备上获得所需的宽度。

旁注：您的html无效，因为将html和正文标签放在[=中是不正确的39=]。您所有的内容都应该放在正文标签内

<!DOCTYPE html>
<div style="max-width:480px;width:100%; border: 5px outset #000000; height: 
 auto;box-shadow:7px 7px 20px #000808;background-color:rgb(249,249,249);">

  <html>
  <a href="http://aictnews.blogspot.kr/2013/08/blog-post_31.html">
    <img src="http://2.bp.blogspot.com/-v9CzVdQnsYw/UibtvHFD18I/AAAAAAAABBI/
   X-rjZWuarII/s1600/bongwon+suh.png" style="max-width:100%;" align="top" /><br>

    <body>
      <p style="max-width:470px;width:100%;"><strong>""이제 한우물만 파서는 안 돼"</strong><br></p>
      <p style="max-width:470px;width:100%;">"1990년대까지는 넓게 알되 한 분야에 능통한 'T'형"</p>
    </body>

  </html>
</div>

更好的有效代码 html :

<!DOCTYPE html>
<html>

<body style="max-width:480px;width:100%; border: 5px outset #000000; height: 
 auto;box-shadow:7px 7px 20px #000808;background-color:rgb(249,249,249);">
  <a href="http://aictnews.blogspot.kr/2013/08/blog-post_31.html">
    <img src="http://2.bp.blogspot.com/-v9CzVdQnsYw/UibtvHFD18I/AAAAAAAABBI/
   X-rjZWuarII/s1600/bongwon+suh.png" style="max-width:100%;" align="top" /></a>
  <p style="max-width:470px;width:100%;"><strong>""이제 한우물만 파서는 안 돼"</strong><br></p>
  <p style="max-width:470px;width:100%;">"1990년대까지는 넓게 알되 한 분야에 능통한 'T'형"</p>
</body>

</html>

Answer 2

您的 HTML 代码格式不正确。您必须在 body 标签内使用 div。

第一个解决方案

如果要创建列，则可以使用 flex。将 display: flex 设置为父级 div 并将 flex:1 设置为子级 div.

  .parent_div{
   height:auto; 
   width:400px; 
   border: 5px outset #000000;
   box-shadow:5px 5px 15px #000808;
   background-color:rgb(249,249,249);
   
  }
  .parent_div img{
   width: 100%;
  }
  .parent_div a{
   display: flex;

  }
  .first{
   flex: 1;
  }
  .two{
   flex: 1;
  }
  @media only screen and (max-width : 685px)  {
  .parent_div{
   width: 100%;
  }

<div class="parent_div">
   <a href="http://www.yes24.com/24/goods/42487097?scode=029">
     <div class="first">
      <img src="http://image.yes24.com/momo/TopCate1281/MidCate009/128080813.jpg"  align="left"/>
     </div>
     
   <div class="two">
      <strong>디지털 노마드(도유진 저)</strong><br>
      출판 : 남해의봄날<br>
      발매 : 2017.06.10<br>
   </div>
  </a>
</div>

第二种解法

创建父级 div 并设置 width:480px 并将 width:100% 设置为图像。它将在台式机和笔记本电脑上完美显示。

对于移动设备，您必须使用 @media query

@media only screen and (max-width : 685px)  {
        .parent_div{
            width: 100%;
        }

在媒体 query.it 中将 parend div 的宽度设置为 100% 将完美工作。

body{
 margin: 0;
 padding: 0;
}
 .parent_div{
   width:480px;
   border: 5px outset #000000; 
   height: auto;
   box-shadow:7px 7px 20px #000808;
   background-color:rgb(249,249,249);
 }
 .parent_div img{
  width: 100%;
 }
 @media only screen and (max-width : 685px)  {
  .parent_div{
   width: 100%;
  }
}

<div class="parent_div">
   <a href="http://aictnews.blogspot.kr/2013/08/blog-post_31.html">
   <img src="http://www.elastic.co/assets/bltada7771f270d08f6/enhanced-buzz-1492-1379411828-15.jpg"  align="top"/><br>
   <p><strong>klajldjskldjlksd</strong><br></p>
   <p>'ask;ldksldkl;sk;ldas;l</p>
</a>
</div>

如何使用 html 代码制作响应框？

how to make a responsive box using html code?

html

javascript

css

mobile

jquery-mobile

第一个问题：文本在移动设备上开箱即用

问题二（类似问题）：手机看不到

非常感谢任何解决此问题的帮助或建议。