如何使用HTML代碼制作一個響應框？
[英]how to make a responsive box using html code?
問題描述
在我的博客文章上，我制作了帶有圖片和文字的框。
它們在移動設備上看起來很破損，而在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”制作了一個框，因此在移動屏幕上顯示時，框內的圖片在右端掉線了。
對於解決此問題的任何幫助或建議，我們將不勝感激。
2 個解決方案
解決方案1
0 已采納 2017-12-02 08:21:09
您需要使用max-width而不是width然后使寬度始終為100％。 使用此配置，您將在台式機和移動設備上擁有所需的寬度，它將占用屏幕的寬度。
注意 ：您的html無效，因為將html和body標簽放在div中是不正確的。 您所有的內容都應放在body標簽內
<!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>
解決方案2
0 2017-12-02 09:23:42
您的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%;
}
在媒體查詢中將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>
如何使用引導程序使HTML5畫布繪制應用程序響應？
[英]How to make a HTML5 canvas paint application responsive using bootstrap?
如何使輪播標題響應？ 我在描述框中添加了圖片和代碼，請查看
[英]How to make carousel caption responsive? I have added image and code in description box please look over it
如何在HTML CSS Bootstrap或angular js中制作編程代碼框
[英]How to make a programming code box in html css bootstrap or angular js
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.