Html 需要css布局的提示吗 ，--------------------------------------------------------------。 |,-----------------------. ,------------------.| || | | || |`-----------------------' | || |,-----------------------. | || ||| |纵横比1:1|| |`-----------------------' | || |,-----------------------. | || || | | || |`-----------------------' `------------------'| `----------------------------------------------'

我想用约束来布局上面的内容：

• 高度由3个输入字段限制，即

  height=3*input\u height+2*margin

• 应满足高度要求，即

  img\u height=height

• 的长宽比恒定为1，因此其宽度受到限制，即

  img\u width=img\u height=height

• 的宽度可以通过

  输入宽度=宽度-img\u宽度来约束

• 父宽度是固定的

  width=some\u fixed\u值

我想用纯css实现这一点，这可能吗？怎么做

我是网络新手，所以不太熟悉css布局。我做了一些搜索，似乎高度不能是一个基本的约束（只是根据我得到的猜测）

---

谢谢。

这可能不是最好的（我个人认为，如果我花更多的时间在上面，会更好），但是如果你只想使用CSS，这应该可以做到：

,----------------------------------------------.
|,-----------------------. ,------------------.|
|| <input>               | |                  ||
|`-----------------------' |                  ||
|,-----------------------. |     <img>        ||
|| <input>               | | aspect ratio 1:1 ||
|`-----------------------' |                  ||
|,-----------------------. |                  ||
|| <input>               | |                  ||
|`-----------------------' `------------------'|
`----------------------------------------------'

---

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

考虑使用包含两个元素（输入和图像）的flexbox，并使用另一个嵌套的flexbox来处理图像。因为您没有提到避免使用

，用简单的HTML表格就可以做到这一点…@torazaburo，谢谢，我试过使用，但没有弄清楚如何实现

img_wdith=img_height

@Raptor，谢谢，如何使用表格将纵横比设置为1:1？试试看

<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>

<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>