,----------------------------------------------.
|,-----------------------. ,------------------.|
|| <input> | | ||
|`-----------------------' | ||
|,-----------------------. | <img> ||
|| <input> | | aspect ratio 1:1 ||
|`-----------------------' | ||
|,-----------------------. | ||
|| <input> | | ||
|`-----------------------' `------------------'|
`----------------------------------------------'
我想用约束来布局像上面这样的东西:
- 高度受 3 个输入字段限制，即
height = 3 * input_height + 2 * margin
-
<img>应该满足高度，即 img_height = height
-
<img>纵横比恒定为 1，因此其宽度受到限制，即 img_width = img_height = height
-
<input>的宽度可以受 input_width = width - img_width 约束
- 父宽度固定
width = some_fixed_value
我想用纯CSS实现这个，这可能吗？以及如何？
我是网络新手，对 CSS 布局不是很熟悉。我做了一些搜索，似乎高度不能成为原始约束(根据我得到的只是一个猜测)。
谢谢。
这可能不是最好的(个人而言，我认为如果我花更多的时间在这上面会更好)，但如果你只想使用 CSS，这应该可以解决问题:
<style>
div#main {
background: tan;
padding: 5px;
height: 250px;
display:inline-block;
}
#input-container {
height: 100%;
margin-right: 5px;
width: auto;
float: left;
display:inline-block;
}
input {
height: 28%;
width: 250px;
margin: 1% 0 1% 0;
}
#img-container {
height: 100%;
display:inline-block;
}
#image {
height: 100%;
}
</style>
<div id="main">
<div id="input-container">
<input><br>
<input><br>
<input><br>
</div>
<div id="img-container">
<img src="path\to\image.jpg" id="image">
</div>
</div>
这可能不是您想要实现的目标，但它可能会奏效。不幸的是，在更改 div#main 的高度和宽度时，这会有点挑剔，因为许多其他元素的高度和宽度不会自动填充到父元素的高度。基本上，这意味着如果您计划允许在浏览器中更改 inputs/image/main 的大小(即使用百分比)，它将无法工作。
或者，您可以使用表格来包含输入，如下所示:
<style>
div#main {
background: tan;
padding: 5px;
display:inline-block;
}
table {
height: 100%;
margin-right: 5px;
width: auto;
float: left;
display:inline-block;
}
td {
padding: 0px;
}
input {
height: 20px; /*Change this value*/
width: 250px;
margin: 1% 0 1% 0;
}
#img-container {
height: 100px; /*And change this*/
display:inline-block;
}
#image {
height: 100%;
}
</style>
<div id="main">
<table>
<tr>
<td><input><br></td>
</tr>
<tr>
<td><input><br></td>
</tr>
<tr>
<td><input><br></td>
</tr>
</table>
<div id="img-container">
<img src="path\to\image.jpg" id="image">
</div>
</div>
我找不到让图像自动调整大小的方法，因此您必须分别更改输入和图像的大小。