0

我正在回到一个项目的 Web 开发中，我正在尝试学习如何设置我的 div，以便一些元素左对齐而其他元素右对齐。很多个月前，我会使用表格并设置单元格的对齐方式，但我似乎无法找到与 div 相同的内容。

在下面的 html 代码中，我试图使文本“我的品牌”位于左侧，而“链接 1”和“链接 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>

谢谢

4

4 回答 4

2

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;
}
于 2013-08-26T05:12:46.463 回答
0

添加float:left标语的样式。

演示在这里

于 2013-08-26T05:09:20.677 回答
0

float:left是你的朋友 ：）

于 2013-08-26T05:07:43.907 回答
-1

试试这个。它会帮助你。

<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>
于 2013-08-26T05:12:10.443 回答