html - 当有足够的空间时，div block 如何向下移动？

Question

我有一个相当简单的问题。出于某种原因，即使父 div 中应该有足够的空间，div.actionBar 也会向下移动:

.venueInfoSection {
	position: relative;
        width: 960px;
}

.venueInfoSection .topVenueSection {
	line-height: 0;
	padding: 20px;
}

.venueInfoSection .topVenueSection .mainIconWrapper {
	display: inline-block;
	line-height: 0;
	margin-right: 20px;
	max-width: 88px;
	overflow: hidden;
}

.venueInfoSection .topVenueSection .primaryInfo {
	display: inline-block;
	line-height: 20px;
	vertical-align: top;
	width: 512px;
}

.venueInfoSection .actionBar {
	display: inline-block;
	margin: 58px 0 0 15px;
	text-align: right;
	vertical-align: top;
	width: 285px;
}

<div class="venueInfoSection">
    <div class="topVenueSection">
        <div class="mainIconWrapper"><img src="images/surfspot_88.png" height="88" width="88">
        </div>
        <div class="primaryInfo">
            <div class="venueNameSection">
                <h1 class="venueName" itemprop="name">Title</h1> </div>
            <div class="categories"> <span class="unlinkedCategory">Surf Spot</span> </div>
            <div class="locationInfo"> <span class="venueCity">38 Bourke St</span> </div>
            <div class="bottomVenueSection"></div>
        </div>
        <div class="actionBar"> <span class="saveAction actionBtn"> <div class="saveButton saveToListAction inactive" title="Save to my saved places!"> <span class="saveAction actionBtn"><span class="buttonLeft"><img src="images/button_icon_saveribbon-9c5999c2ee53e7d96.png" height="16" width="16"></span><span class="buttonRight unsaved"><span class="label">Save</span></span>
            </span>
        </div>
        </span><span class="shareAction actionBtn"> <div class="doubleShareButton" title="Share this place with friends!"> <span class="shareAction actionBtn"><span class="buttonLeft"><img src="images/button_icon_saveribbon-9c5999c4703e7d96.png" height="16" width="16"></span><span class="buttonRight"><span class="label">Share</span></span>
        </span>
    </div>
    </span>
</div>
</div>
</div>

如果减去宽度:

• venueInfoSection 宽度为 960px
• topVenueSection 有 20px 的内边距
• mainIconWrapper 为 88px 宽 + 20px 边距
• primaryInfo 宽度为 512px
• actionBar 为 285px 宽 + 15px 边距

所以 960-20-20-88-20-512-285-15=0

为什么即使有足够的空间，actionBar 也会向下移动？它似乎只有在宽度设置为 277px 时才会与其他两个 block 内联。

Answer 1

当您将 display 设置为 inline-block 时，HTML 中的某些空白将呈现为每个元素之间的间距。该空白是导致您的布局中断的原因。

最简单的替代方案是将 display: inline-block 的每个实例替换为 float: left 尽管有无数的替代方案(例如:参见“Fighting the Space Between”行内 block 元素的 https://css-tricks.com/fighting-the-space-between-inline-block-elements/ )

.venueInfoSection {
	position: relative;
        width: 960px;
}

.venueInfoSection .topVenueSection {
	line-height: 0;
	padding: 20px;
}

.venueInfoSection .topVenueSection .mainIconWrapper {
	float: left;
	line-height: 0;
	margin-right: 20px;
	max-width: 88px;
	overflow: hidden;
}

.venueInfoSection .topVenueSection .primaryInfo {
	float: left;
	line-height: 20px;
	vertical-align: top;
	width: 512px;
}

.venueInfoSection .actionBar {
	display: inline-block;
	margin: 58px 0 0 15px;
	text-align: right;
	vertical-align: top;
	width: 285px;
  background: yellow;
}

<div class="venueInfoSection">
    <div class="topVenueSection">
        <div class="mainIconWrapper"><img src="images/surfspot_88.png" height="88" width="88">
        </div>
        <div class="primaryInfo">
            <div class="venueNameSection">
                <h1 class="venueName" itemprop="name">Title</h1> </div>
            <div class="categories"> <span class="unlinkedCategory">Surf Spot</span> </div>
            <div class="locationInfo"> <span class="venueCity">38 Bourke St</span> </div>
            <div class="bottomVenueSection"></div>
        </div>
        <div class="actionBar"> <span class="saveAction actionBtn"> <div class="saveButton saveToListAction inactive" title="Save to my saved places!"> <span class="saveAction actionBtn"><span class="buttonLeft"><img src="images/button_icon_saveribbon-9c5999c2ee53e7d96.png" height="16" width="16"></span><span class="buttonRight unsaved"><span class="label">Save</span></span>
            </span>
        </div>
        </span><span class="shareAction actionBtn"> <div class="doubleShareButton" title="Share this place with friends!"> <span class="shareAction actionBtn"><span class="buttonLeft"><img src="images/button_icon_saveribbon-9c5999c4703e7d96.png" height="16" width="16"></span><span class="buttonRight"><span class="label">Share</span></span>
        </span>
    </div>
    </span>
</div>
</div>
</div>

您还可以根据需要适应的浏览器支持级别使用 Flex 网格。