Question

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

.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宽度为960像素
topVenueSection有20px填充
mainIconWrapper是88px宽+ 20px边距
primaryInfo是512px宽
actionBar是285px宽+15px边距

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

即使有足够的空间，actionBar如何向下移动？只有当宽度设置为277px时，它似乎与其他两个块内联。

Answer 1

当您将显示设置为inline-block时，HTML中的某些空格会呈现为每个元素之间的间距。那个空白就是导致你的布局破裂的原因。

最简单的替代方法是用display: inline-block替换float: left的每个实例，尽管有无数的替代方案（例如：参见'在内联块元素之间争取空间'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网格，具体取决于您需要支持的浏览器支持级别。

Answer 2

这是一个弄乱你的布局的空白。 line-height:0是不够的。

尝试将font-size设置为零： div {font-size:0;} h1,span{font-size:initial;}

请考虑使用flex-layout。

＆＃13;

div {font-size:0;}
h1,span{font-size:initial;}
.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;
}

＆＃13;

<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>

＆＃13;

当有足够的空间时，如何将div块向下移动？

2 个答案: