Использование встроенного блока и встроенного блока, похоже, не работает так, как я ожидал
*, html, body { padding: 0; margin: 0; font-family: -apple-system, "Helvetica Neue", Arial, sans-serif; background: #ffe6eb; color: #4E2B99;}
.container { margin: 0px auto; max-width: 1000px; text-align: center; }
.header img { width: 5em; }
/* item */
.item { max-width: 500px; display: inline-block; }
.item .byf { font-style: italic; }
.item .byf-avatar { max-width: 1em; border-radius: 1em; }
.item .content { margin-top: 10px; min-height: 200px; background-color: white; border-radius: 5px; }<html>
<head>
<title>Friends of Friends - Peach</title>
</head>
<body>
<div id = "container" class = "container">
<!-- Begin Header -->
<div id = "header" class = "header">
<img src = "http://peach.cool/images/[email protected]" alt = "logo" />
</div>
<!-- End Header-->
<!-- Begin Content -->
<div id = "content" class = "content">
<div id = "items" class = "items">
<!-- Begin Item -->
<div id = "item-1" class = "item">
<span class = "byf">Because you follow <img src = "https://scontent.fcmh1-1.fna.fbcdn.net/v/t1.0-9/38600406_695730037430614_8379042433521942528_o.jpg?_nc_cat=103&oh=e3b71b3b819c1bd035c98057e5b7a69a&oe=5C4FEC80" alt = "avatar-1" class = "byf-avatar" /> <strong>Name</strong>... </span>
<div id = "content" class = "content">
<div class = "content-list">
<div class = "content-list-item">
<span class = "cli-name">Name</span> @<span class = "cli-handle"></span>
</div>
</div>
</div>
</div>
<!-- End Item -->
<!-- Begin Item -->
<div id = "item-1" class = "item">
<span class = "byf">Because you follow <img src = "image" alt = "avatar-1" class = "byf-avatar" /> <strong>Name</strong>... </span>
<div id = "content" class = "content">
<div class = "content-list">
<div class = "content-list-item">
<span class = "cli-name">Name</span> @<span class = "cli-handle"></span>
</div>
</div>
</div>
</div>
<!-- End Item -->
</div>
</div>
<!-- End Content -->
</div>
</body>
</html>https://jsfiddle.net/56jgh7Lx/
У меня есть различные предметы (class = "item"), для которых я пытаюсь создать сетку. Каждый элемент должен иметь максимальную ширину 500, а контейнер, в котором они находятся, имеет переменную ширину 1000 пикселей. Когда я использую display: inline для класса элемента, он меняет ширину всех элементов на 1000 пикселей, что явно не то, что я ищу. Если я использую display: inline-block, он меняет ширину до 200 пикселей.
Я немного смущен, почему это происходит, тем более что моя ширина установлена на максимум 500 пикселей. Я новичок в CSS и хотел бы узнать и понять больше.
Ответы 3
Проблема в max-width, а не в display. И inline-block, и inline делали то, что должны были делать. К встроенным элементам width, примененные в CSS, не применяются. На inline-block они есть.
Однако CSS max-width действует только в том случае, если контент шире, чем max-width. В настоящее время ваш контент не превышает 500 пикселей в ширину. Вам необходимо установить свойство width, чтобы max-width вступил в силу, как это.
.item{
max-width:500px;
width: 100%;
display:inline-block;
}
В идеальном сценарии встроенный контейнер не может содержать элементы уровня блока. В вашем случае class = "item" вы пытаетесь иметь встроенный элемент, который содержит дочерний элемент class = "content", который является блочным элементом, и, как и ожидалось, ширина встроенного контейнера будет соответствовать дочернему элементу блока.
display:inline-block; принимает высоту и ширину и будет отображаться рядом друг с другом, в то время как display:inline не принимает высоту и ширину, но будет отображаться друг для друга. для вас max-width:500px работает, потому что ваш контент имеет ширину только 200px, если вы расширите свое содержимое, вы получите эффект прокрутки или ваш контент выйдет за пределы контейнера, если его размер превышает 500 пикселей.