0
У меня есть код ниже. Плетение являетсяCSS inline issue
<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->
<div class="box1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim quia voluptatem sequi ad iure obcaecati assumenda omnis aperiam ullam cupiditate possimus at ab sint! Dicta quisquam rem sunt aliquid inventore?</div>
<div class="box2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam quas ipsum minus perspiciatis est quam sit blanditiis harum rem similique eligendi suscipit voluptas ex placeat magnam quos amet! Est ut.</div>
<!-- End your code here -->
</body>
</html>
CSS является
* {
padding: 0;
margin: 0;
}
.box1 {
position: relative;
display: inline-block;
background: grey;
width: 200px;
height: 200px;
margin: 10px;
}
.box2 {
position: relative;
display: inline;
}
Пожалуйста, помогите мне понять причину почему содержание box2 не начиная с вершины, но совсем снизу? есть ли какая-то конкретная причина для этого? Я могу решить это, добавив float, но я просто интересуюсь этим поведением.
Пожалуйста, помогите мне понять.
Заранее спасибо
это может помочь, примените 'vertical-align: top;' to '.box2', demo - http://liveweave.com/b9dVx5 – Anonymous
Спасибо Мэри, я хотел знать причину такого поведения, а не решение. спасибо в любом случае – user3751873
Я не знаю достаточно о «Почему», я боюсь. Но изменение позиции до «абсолютного» сработало для меня. Возможно, мы сможем сузить его до правил, связанных с этим свойством стиля (или отображаемым). – ne1410s