我是HTML和CSS的新手，如果有人能帮助我的话......我基本上有一个占据所有宽度的头，其中有两个块（带内容的内联块）。我的目标很简单，我想改变他们的位置（我在下面做了两张图片来演示）。但我也在尝试让它对移动设备做出响应（我用的是一个320x586以上的网页大小调整器），网站上的其他东西都能正常工作，但那个没有。
- 现在就来体验一下：（https://i.stack.imgur.com/pQ98I.png）
- 尝尝我想做的：（https://i.stack.imgur.com/7NeBC.png）（在原始代码中，第二个块是通过"max-width"属性稳定的图片，这使得它正好是该大小）
但是每次我尝试用框元素（边距，填充等）调整内联块时，它只起作用，但当我在mobile resizer中打开时，它们要么被裁剪，要么溢出标题。如果我让div保持它们自己的内联块标准设置，它们在mobile透视图中工作。
我已经尝试了几天了，我没有尝试flex，因为我还没有学会它。我尝试了所有的"位置"值，但在mobile中它们不起作用。在我的原始代码中，2个div内联块没有"宽度"和"高度"值，只有"最大宽度"和"最大高度"，但是大小就像我放在这里的图片一样。我试着使用"溢出"属性，但是它只在垂直方向工作，水平方向它仍然溢出。
有人能帮帮我吗？：'）
我做了一个html/css示例来演示：
~~编辑~~~
我添加了两个新的图片后，从莎拉的建议（谢谢!），添加"弹性"和"空间周围"工作与pc浏览器的大小（第一张照片），但与移动大小它是裁剪（照片2）
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Posicionamento do elemento div</title>
<style>
* {
margin: 0px;
}
nav {
margin: 10px;
padding: 30px;
border: 1px solid black;;
}
header {
min-height: 550px;
background-image: linear-gradient(to right, rgba(128, 128, 128, 0.582), transparent);
}
#um {
display: inline-block;
margin: 10px;
border: 10px solid black;
width: 500px;
height: 300px;
background-color: aqua;
border: 1px solid black;
}
#dois {
display: inline-block;
margin: 10px;
border: 1px solid black;
width: 400px;
height: 400px;
background-color: aqua;
}
</style>
</head>
<body>
<nav>
<a href="#">Início</a>
<a href="#">Sobre mim</a>
<a href="#">Habilidades</a>
<a href="#">Contato</a>
</nav>
<header>
<div id="um"></div>
<div id="dois"></div>
</header>
</body>
</html>
1条答案
按热度按时间ia2d9nvy1#
为了简单起见，我建议您使用flex来控制布局。我只需要向
header选择器添加两行CSS。一旦您指定了display: flex;，您就可以使用justify-content: space-around;来控制水平间距。在这种情况下，每个div周围的空间将被平均分配。对于不同的屏幕大小，您可以使用媒体查询。以下是针对小屏幕大小或移动视图使用媒体查询的示例：
上面的媒体查询将应用css，它将改变flex-direction，直到屏幕大小大于600px。