如何使三个div水平排列 [英] how to make three divs line up horizontally

问题描述

尝试将三个div排成一行。继续我正在使用的是什么

trying to make three divs line up. heres what I'm working with

<div id="final_space">
    <div id="sub_cat_1">About</div>
    <div id="sub_cat_2">Contact</div>
    <div id="sub_cat_3">F.A.Q.</div>
</div>

我试过让每个sub_cat的css为float：left，center和right分别，但由于某种原因，他们不会排队

I've tried making the css for each of the sub_cat's be float: left, center, and right respectively, but for some reason they wont line up

推荐答案

有很多方法，但是最容易管理的方法layout是将内部 div 元素显示为 table-cell ：

There are many methods, but the most manageable way to get just a horizontal layout is to display the inner div elements as table-cell:

div#final_space>div {
    display: table-cell;
}

请注意，上面的选择器比尝试对内部<$进行分类更有用c $ c> div 元素。

Note that the selector above is more usable than trying to class the inner div elements.

将它们均匀分散需要多做一些工作。您需要更改容器的显示 div 。

To spread them out evenly takes a little more work. You need to change the display of the container div.

div#final_space {
    display: table;
    width: 100%;
    table-layout: fixed;
}

这适用于所有当前浏览器，甚至 IE8 。

This works in all current browsers, even IE8.

div#final_space>div {
	display: table-cell;
	/* For visibility only: */
	text-align: center;
	border: thin solid #999;
}
div#final_space {
	display: table;
	width: 100%;
	table-layout: fixed;
}

<div id="final_space">
    <div id="sub_cat_1">About</div>
    <div id="sub_cat_2">Contact</div>
    <div id="sub_cat_3">F.A.Q.</div>
</div>

这篇关于如何使三个div水平排列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！