我是 HTML5 和 CSS3 的新手，正在为大学开发我的第一个网站/应用程序。理想情况下我需要它显示在手机图像上(我还没有掌握)但现在我正在尝试做的是显示灵活的盒子工作。当我调整窗口大小时，您会看到文本换行，但 Logo 保持不变。有人建议我可以将图像设置为 div 的背景，它会根据窗口大小进行调整，但不确定如何执行此操作。
!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<!-- CSS -->
<link rel="stylesheet" href="preposting.css">
<title>Title goes here</title>
</head>
<body>
<div id="container">
<header id="top_header">
<div id="logo">
<img class="logo_image" src="logo.gif" alt="" />
</div>
<div id="welcome">
<h1>Text wraps when I adjust window size but image doesn't. It was suggested that I should set image as background to div and that way it would adjust but not sure how to do this.</h1>
</div>
</header>
</div>
</body>
</html>
#container
{
text-align:left;
border: 10px solid black;
margin: 20px auto;
display:-webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}
#top_header
{
border:30px solid green;
padding:20px;
background:yellow;
display:-webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-flex: 1;
}
#img.logo_image {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
最佳答案
我看到您使用的是旧的柔性盒模型:-webkit-box;
新的基本上只叫flex；您将键入:display: -webkit-flex;
他们在这里有很好的例子:http://www.w3.org/TR/css3-flexbox/
CSS:
#main { display: flex; }
#main > article { flex:1; order: 2; }
#main > nav { width: 200px; order: 1; }
#main > aside { width: 200px; order: 3; }
@media all and (max-width: 600px) {
/* Too narrow to support three columns */
#main { flex-flow: column; }
#main > article, #main > nav, #main > aside {
/* Return them to document order */
order: 0; width: auto;
}
}
关于html - 将图像添加到柔性盒模型，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14661677/