Question

我正在回到项目的Web开发中，我正在尝试学习如何设置我的div，以便一些元素保持对齐，而其他元素则正确对齐。之前的许多月前我都会使用一张桌子来设置细胞的排列，但我似乎找不到与div相当的东西。

在下面的html代码中，我试图将文本“My Brand”放在左侧，将“Link 1”和“Link 2”文本块放在右侧。所有3个文本块应位于同一行并垂直对齐。

<html>
<head>
    <title>Hi Mom</title>


<style>
    .header
    {
    background-color:#BFEFFF;
    height:50px;
    }

    .tagline
    {
    color: #00A5D8;
       font-size: 20pt;
    font-family: Helvetica Neue;
    font-weight: bold;
    vertical-align: middle;
    text-indent: 20pt;
    display: inline;
    }

body
{
margin:0px;
}
</style>    
</head>
<body >

<div class="header"><div class="tagline"><p>My  Brand</p></div><div class="tagline"><p>Link 1</p></div><div class="tagline"><p>Link 2</p></div></div>

<div><center>
    blah blah
</center></div>
</body>
</html>

由于

Answer 1

HTML

   <div class="header"><div class="tagline1"><p >My  Brand</p></div><div class="tagline"><p>Link 2</p></div><div class="tagline"><p>Link 1</p></div></div>

<div><center>
    blah blah
</center></div>

<强> CSS

   .header
{
background-color:#BFEFFF;
height:50px;


}

.tagline
{
color: #00A5D8;
   font-size: 20pt;
font-family: Helvetica Neue;
font-weight: bold;
vertical-align: middle;
text-indent: 20pt;
display: inline;
float:right;
width:300px;
}
 .tagline1
{
color: #00A5D8;
   font-size: 20pt;
font-family: Helvetica Neue;
font-weight: bold;
vertical-align: middle;
text-indent: 20pt;
display: inline;
float:left;
width:300px;
}


body
{
margin:0px;
overflow:hidden;
}

Answer 2

float:left是你的朋友：）

Answer 3

以标语样式添加float:left。

Demo here

Answer 4

试试这个。它会帮助你。

<div style="width:100%;">
    <div style="width:30%;float:left;">My Brand</div>
    <div style="width:30%;float:left;">Link1</div>
    <div style="width:30%;float:left;">Link2</div>
</div>

正确的方法是使用div来对齐左侧或右侧的网页分区

4 个答案: