如何在div的右侧和左侧有文字

我正在试图制作一个左侧图像和左侧图像的标题。如何在div的右侧和左侧有文字

本质上，下面：

[LOGO HERE] Link1 Link2 Link3

我想用div而不是表格，我该如何在保持'流动性'的同时去做这件事。

这里是我的容器CSS：

.container { 
    width: 85%; 
    max-width: 1260px; 
    min-width: 680px; 
    background: #FFF; 
    margin: 0 auto; 
}

这是我的头CSS：

.header { 
    background: #FFF; 
    width: 100%; 
    height: 10%; 
} 
.header2 { 
    float: right; 
    width:49%; 

}

头是图像，标题2是文本。

这是我如何称呼它：

<body> 

<div class="container"> 
    <div class="header"><a href="http://www.college.edu"><img src="http://newhope.edu/images/Logo.png" alt="" name="" width="40%" id="Insert_logo" style="background: #FFF; display:block;" /></a> 
    <div class="header2"> 
    test 
    </div> 
    <!-- end .header --></div>

如果你想看到的代码的其余部分，让我知道。

我试图让自己的类，如header2所示。我只需要将标题分开，我真的不想使用表格。

谢谢！

来源

2013-07-12 Jared Tillford

我假设你的意思是“正确”的链接。试试这个：

.header { 
    background: #FFF; 
    float: left; 
    width: 50%; 
    height: 10%; 
} 

.header2 { 
    float: right; 
    width: 50%; 
}

并确保你有一个clear下，使内容不滚成，是这样的：

<br style="clear: both" />

来源

2013-07-12 18:20:32 NinthCrow

谢谢您的答复。看起来这不起作用！它只是这样做：http://i40.tinypic.com/20gy42d.png 我希望它在右侧居中（因为我知道我的左边，显然） –

嗯......你可能有一些填充和/或边距，这使得50％的宽度比实际的50％宽。尝试拉出百分比。看到在这里工作：http://jsfiddle.net/bebd3/ – NinthCrow

我做到了。这是完成后的输出。 http://i39.tinypic.com/2r2vh91.png 任何想法，或者我只是qwopping？ –

如何在div的右侧和左侧有文字

回答

相关问题