У меня есть оболочка, охватывающая 3 div, которые являются встроенными блоками, и все три div имеют высоту 128 пикселей. Нигде нет ни отступов, ни полей. Первый div содержит изображение и имеет не ту же высоту, что и два других (ниже на 3,3 пикселя).

 <div style={{width:"700px",height:"700px",position:"relative",left:"50%",transform:"translateX(-50%)"}}>
    <hr style={{width:"100%"}}/>
    <div>
      <div style={{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={{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={{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>

Код написан на JSX.
Я пробовал установить обертку на 128 пикселей, но <img> все еще торчит снизу
Почему <img> так себя ведет?

-1
SirSoDerp 5 Янв 2018 в 23:50

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>

См. Мои элементы встроенного блока не выстраиваются должным образом для дополнительной информации.

0
Joe Hawkins 5 Янв 2018 в 21:09