Html 如何定位一些文本？_Html_Css_Twig

Html 如何定位一些文本？

html css twig

Html 如何定位一些文本？,html,css,twig,Html,Css,Twig,很抱歉这个愚蠢的问题，但我只知道一点css，我不知道如何设计我的网站。这是我的密码： HTML（细枝）：这就是我得到的。我想解决的问题是Maria和Peter将显示在Anna和John下，它们都位于标签下面这4个朋友今天过生日：。我知道这是因为图像，但我不知道如何使它看起来很好( 请帮助！提前感谢！您只需在try类中添加一些空白：您只需在try类中添加一些剩余边距：将css添加到head部分的样式标记中，如下所示 <html> <head> <style&

很抱歉这个愚蠢的问题，但我只知道一点css，我不知道如何设计我的网站。这是我的密码：

HTML（细枝）：

这就是我得到的。我想解决的问题是

Maria

和

Peter

将显示在

Anna

和

John

下，它们都位于标签

下面这4个朋友今天过生日：

。我知道这是因为图像，但我不知道如何使它看起来很好(

请帮助！提前感谢！

您只需在try类中添加一些空白：

您只需在try类中添加一些剩余边距：

将css添加到head部分的样式标记中，如下所示

<html>
<head>
<style>
{
    background-color: #FFFFF1;
    text-align: center;
    font-size: 17px;
    font-family: Tahoma, Geneva, sans-serif;  
}

p {
    margin: 10px;
}

a {
    text-decoration: none;
    color: #6a9211;
}

a:hover {
    text-decoration: underline;
}

.wrap {
    width: 700px;
    margin: auto;
}

.birthday {
    width: 49px;
    height: 80px;
    float: left;
    margin-left: 150px;
    display: block;  
}

.try {
    display: block;
    margin-right: 150px;
    margin-bottom: 50px;
}

.years {
    font-size: 12px;
}

</style>
</head>
<body>
<div class="wrap">
    <div>
        <img class="birthday" src="http://www.clker.com/cliparts/1/d/a/6/11970917161615154558carlitos_Balloons.svg.med.png">
            <div class="try"> 
               This friends have brithday today: 
               {% for bd in birthdays %}

               <p>
                   <a href="{{ path('friend_id', {'id': bd.id}) }}">{{ bd.name }}</a>
                      <span class="years">
                         ({{ bd.years }} years)
                       </span>
               </p>

               {% endfor %}

            </div>

    </div>
</div>

</body>
</html>


{
背景色：#FFFFF 1；
文本对齐：居中；
字号：17px；
字体系列：塔荷马，日内瓦，无衬线；
}
p{
利润率：10px；
}
a{
文字装饰：无；
颜色：#6a9211；
}
a:悬停{
文字装饰：下划线；
}
.包裹{
宽度：700px；
保证金：自动；
}
.生日{
宽度：49px；
高度：80px；
浮动：左；
左边距：150像素；
显示：块；
}
.试试看{
显示：块；
右边距：150px；
边缘底部：50px；
}
.年{
字体大小：12px；
}
这是朋友们今天的生日：
{生日中bd的百分比%}

（{{bd.years}}}年）

{%endfor%}

将css添加到标题部分的样式标记中，如下所示

<html>
<head>
<style>
{
    background-color: #FFFFF1;
    text-align: center;
    font-size: 17px;
    font-family: Tahoma, Geneva, sans-serif;  
}

p {
    margin: 10px;
}

a {
    text-decoration: none;
    color: #6a9211;
}

a:hover {
    text-decoration: underline;
}

.wrap {
    width: 700px;
    margin: auto;
}

.birthday {
    width: 49px;
    height: 80px;
    float: left;
    margin-left: 150px;
    display: block;  
}

.try {
    display: block;
    margin-right: 150px;
    margin-bottom: 50px;
}

.years {
    font-size: 12px;
}

</style>
</head>
<body>
<div class="wrap">
    <div>
        <img class="birthday" src="http://www.clker.com/cliparts/1/d/a/6/11970917161615154558carlitos_Balloons.svg.med.png">
            <div class="try"> 
               This friends have brithday today: 
               {% for bd in birthdays %}

               <p>
                   <a href="{{ path('friend_id', {'id': bd.id}) }}">{{ bd.name }}</a>
                      <span class="years">
                         ({{ bd.years }} years)
                       </span>
               </p>

               {% endfor %}

            </div>

    </div>
</div>

</body>
</html>


{
背景色：#FFFFF 1；
文本对齐：居中；
字号：17px；
字体系列：塔荷马，日内瓦，无衬线；
}
p{
利润率：10px；
}
a{
文字装饰：无；
颜色：#6a9211；
}
a:悬停{
文字装饰：下划线；
}
.包裹{
宽度：700px；
保证金：自动；
}
.生日{
宽度：49px；
高度：80px；
浮动：左；
左边距：150像素；
显示：块；
}
.试试看{
显示：块；
右边距：150px；
边缘底部：50px；
}
.年{
字体大小：12px；
}
这是朋友们今天的生日：
{生日中bd的百分比%}

（{{bd.years}}}年）

{%endfor%}

仅CSS-

将

float:right；

添加到

。尝试class-
.try {
    /*display: block;*/ float: right;
    margin-right: 150px;
    margin-bottom: 50px;
}

编辑：
您还可以删除页边距
，并使用宽度
管理div-
.try {
    /*display: block;*/ float: right; width: 500px;
    /*margin-right: 150px;
    margin-bottom: 50px;*/
}

仅CSS-
将float:right；
添加到。尝试class-
.try {
    /*display: block;*/ float: right;
    margin-right: 150px;
    margin-bottom: 50px;
}

编辑：
您还可以删除页边距
，并使用宽度
管理div-
.try {
    /*display: block;*/ float: right; width: 500px;
    /*margin-right: 150px;
    margin-bottom: 50px;*/
}

试试这个：
.try {
width: 500px;
float: right;
margin-right: 150px;
margin-bottom: 50px;
}

试试这个：
.try {
width: 500px;
float: right;
margin-right: 150px;
margin-bottom: 50px;
}

如果您使用的是html5，那么应该使用@StefanNeubert-tat包含css不是强制性的doctype@Sowmya：你说得对，对此感到抱歉。但-乌伊瓦尔的答案仍然不是问题的答案。@StefanNeubert是的，但我没有对答案发表评论。我只是告诉过你：）如果您使用的是html5，那么应该使用@StefanNeubert-tat包含css不是强制性的doctype@Sowmya：你说得对，很抱歉。但是，乌伊瓦尔的回答并不能解决这个问题。@StefanNeubert是的，但我没有对答案发表评论。我告诉你：）+1我会使用float:left并删除右边的空白，但我认为浮动肯定是解决方法。+1我会使用float:left并删除右边的空白，但我认为浮动肯定是解决方法。谢谢接受！虽然此解决方案效果良好，但您可能希望查看其他答案，以便更深入地进行更正。感谢您的接受！尽管此解决方案效果良好，但您可能希望查看其他答案，以便更深入地进行更正。