Question

,----------------------------------------------.
|,-----------------------. ,------------------.|
|| <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布局。我已经完成了一些搜索，看起来高度不能成为一个原始约束（只是根据我得到的猜测）。

感谢。

Answer 1

这可能不是最好的（我个人认为，如果我花更多的时间在它上面，那会更好），但如果你只想使用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的高度和宽度时，这将有点挑剔，因为其他元素的许多高度和宽度不会自动填充到父元素的高度。基本上，这意味着如果您计划在浏览器中允许输入/ 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>

我无法找到一种方法让图像自动调整大小，因此您必须单独更改输入和图像的大小。

需要提示css布局

1 个答案: