Question

我有一个包装器围绕3个内联块的div，所有三个div都是128px高。任何地方都没有填充或边距。第一个div包含一个图像，最终与其他两个不同（低3.3px）。

<img>

代码用JSX编写我已经尝试将包装器设置为128px，但<img>仍然在底部为什么meteor update --release 1.6.1 meteor npm i @babel/core @babel/runtime @babel/preset-stage-1会这样做？

Answer 1

将verticalAlign:top添加到三个<div>的样式属性中的每一个。这会沿着它们的上边缘对齐inline-block元素。

<div style={{width:"700px",height:"700px",position:"relative",left:"50%",transform:"translateX(-50%)"}}>
    <hr style={{width:"100%"}}/>
    <div>
        <div style={{verticalAlign:"top",display:"inline-block",width:"128px",height:"128px",backgroundColor:"grey",position:"relative",top:0}}>
            <img style={{width:"100%"}} src="https://screenshotlayer.com/images/assets/placeholder.png"/>
        </div>
        <div style={{verticalAlign:"top",display:"inline-block",height:"128px",width:"*"}}>
            <span style={{display:"block"}}>Name of Product</span>
            <span style={{display:"block"}}>Quantity: <input type="text" className="form-control" style={{width:"50px",display:"inline-block"}}/></span>
            <span style={{display:"block"}}><button className="btn-link">Remove from cart</button></span>
        </div>
        <div style={{verticalAlign:"top",display:"inline-block",height:"128px",float:"right"}}>
            <span style={{position:"relative",top:"50%",transform:"translateY(-50%)",display:"block"}}>$$$</span>
        </div>
    </div>
    <hr style={{width:"100%"}}/>
</div>

有关其他信息，请参阅My inline-block elements are not lining up properly。

<img/>突出了包装器的底部

1 个答案: