如何在html中水平放置三个div？

本文介绍了如何在html中水平放置三个div？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

<html>

<title>
Website Title
</title>

<div id="the whole thing" style="height:100%; width:100%" >

<div id="leftThing" style="position: relative; width:25%; background-color:blue;">
Left Side Menu
</div>

<div id="content" style="position: relative; width:50%; background-color:green;">
Random Content
</div>

<div id="rightThing" style="position: relative; width:25%; background-color:yellow;">
Right Side Menu
</div>

</div>
</html>

你好人，
我是一个html newb！
我创建了水平分为三个部分的示例网站。
我希望最左边的div是25％的宽度，中间的一个是50％的宽度，右边是25％的宽度，这样的分割水平填充所有的100％的空间。

Hello people,I am a html newb!I am creating sample website which has three divisions horizontally.I want the left most div to be 25% width, the middle one to be 50% width, and right to be 25% width so that the divisions fill all the 100% space horizontally.

当我执行这个代码，divs出现在彼此。我想让他们彼此出现！

When I execute this code, the divs appear over each other. i want them to appear beside each other!

我该怎么办？

感谢

推荐答案

那类的东西;我想使用 inline-block 。

I'd refrain from using floats for this sort of thing; I'd rather use inline-block.

需要考虑的一些要点：

内联样式不利于维护

选择器名称中不应包含空格

您错过了一些重要的HTML标签，例如< head> 和< body>

您没有包含 doctype

Inline styles are bad for maintainability
You shouldn't have spaces in selector names
You missed some important HTML tags, like <head> and <body>
You didn't include a doctype

更好的格式化文档格式：

Here's a better way to format your document:

<!DOCTYPE html>
<html>
<head>
<title>Website Title</title>
<style type="text/css">
* {margin: 0; padding: 0;}
#container {height: 100%; width:100%; font-size: 0;}
#left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 12px;}
#left {width: 25%; background: blue;}
#middle {width: 50%; background: green;}
#right {width: 25%; background: yellow;}
</style>
</head>
<body>
<div id="container">
    <div id="left">Left Side Menu</div>
    <div id="middle">Random Content</div>
    <div id="right">Right Side Menu</div>
</div>
</body>
</html>

这里是来衡量。

这篇关于如何在html中水平放置三个div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！