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

Question

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

所以我试图使用html代码制作一个在移动和PC环境中看起来都很好的盒子。但似乎'使用px或百分比没有帮助'!! 我会给你更详细的解释我的问题如下！

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

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

这个盒子应该是这样的（在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和body标记放在div中是不正确的。您的所有内容都应该放在正文标记

中

＆＃13;

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

＆＃13;

使用有效html的更好的代码：

＆＃13;

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

＆＃13;

Answer 2

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

第一个解决方案

如果要创建列，则可以使用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%;
        }

将100％宽度设置为媒体查询中的parend div。它将完美地工作。

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代码创建响应式框？

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

第二个问题（类似问题）：在移动设备上看不到

非常感谢任何帮助或建议来解决这个问题。

2 个答案: