Question

我的代码出现问题，每次我尝试对齐文本（如位置）并在其下面都有地址，电话号码等，但每次我都尝试时，文本只是重叠等等。 / p>

这是我的代码 - https://jsfiddle.net/6LLn2yjt/1/

有人可以解释我的问题是什么以及如何解决这个问题？由于某种原因，代码也与我的页脚重叠？

HTML

<div class="Location">
        <p>
        <span class="Location" style="text-align:center;">Location</span>
        </p>
        </div>

        <div class="LocationElement">
        <p>
        <font color="black" face="tahoma, geneva, sans-serif">
        <span style="font-size:20px;"> 5000 Willy Wooly Drive </span>
        </font>
        </p>

        <p>
        <font color="black" face="tahoma, geneva, sans-serif">
        <span style="font-size:16px;"> Office:(111) 111.1111  </span>
        </font>
        </p>

        <p>
        <font color="black" face="tahoma, geneva, sans-serif">
        <span style="font-size:16px;"> Fax: (111) 111.1111 </span>
        </font>
        </p>

        <p>
        <font color="black" face="tahoma, geneva, sans-serif">
        <span style="font-size:16px;"> Email: fake@fake.com  </span>
        </font>
        </p>
        </div>

        <div class="Hours">
        <p>
        <span class="Hours" style="text-align:center;">Hours</span>
        </p>
        </div>

        <div class="HoursElement">
        <p>
        <span class="fontSize" style="font-size:16px;">
            <font color="black" face="tahoma, geneva, sans-serif"> 
            Mon-Fri: 9am-7pm</font>
            </span>

        </p>


        <p>
        <span class="fontSize" style="font-size:16px;">
            <font color="black" face="tahoma, geneva, sans-serif"> 
            Sat-Sun: CLOSED</font>
            </span>
            </p>
        </div>

CSS

.Location
{font-size: 30px;
display: inline-block;
float:left;
white-space:nowrap;
}

.Hours
{
font-size: 30px;
display: inline-block;
float:right;
white-space:nowrap;



}
.LocationElement
{
float:left;
white-space:nowrap;


}

.HoursElement
{
float:right;
white-space:nowrap;


}

Answer 1

您的嵌套不正确：https://jsfiddle.net/6LLn2yjt/2/

你的div在其元素之前关闭。

    <div class="Location">
        <p>
            <span class="Location" style="text-align:center;">Location</span>
        </p>


        <div class="LocationElement">
            <p>
                <font color="black" face="tahoma, geneva, sans-serif">
                    <span style="font-size:20px;"> 5000 Willy Wooly Drive </span>
                </font>
            </p>

这将使用您的代码，如小提琴中所示。

Answer 2

试试我的试用版。在页面功能中，更改：

1- For .main -> width value
2- For: .Location section, .Hours section -> height and width values
3- For: .Location header, .Hours header -> the padding-left value

<style>
.main
{
    display:block;
    width:65%;
    margin:0 auto;
    padding:0;
}
.Location,.Hours
{
    display:block;
    float:left; 
}
.Location
{
    width:65%;
}
.Hours
{
    width:34%;
}
.Location header, .Hours header
{
    display:block;
    font-size:30px;
    width:65%;
    margin:0 auto;
    padding-left:30px;
}
.Location section, .Hours section
{
    display:block;
    min-height:200px;
    clear:both;
    width:65%;
    margin:0 auto;
}
.Location section p, .Hours section p
{
    padding:3px;
    margin:10px;
    font-family:tahoma, geneva, sans-serif;
    font-size:16px;
    font-weight:bold;
}
.Location section p span
{
    font-weight:normal;
}
.Location section p span.title
{
    font-size:20px;
    font-weight:bold;
}
</style>
<section class="main">
    <article class="Location">
        <header>Location</header>
        <section>
            <p><span class="title">5000 Willy Wooly Drive</span></p>
            <p>Office: <span>(111) 111.1111</span></p>
            <p>Fax: <span>(111) 111.1111</span></p>
            <p>Email: <span>fake@fake.com</span></p>
        </section>
    </article>
    <article class="Hours">
        <header>Hours</header>
        <section>
            <p>Mon-Fri: 9am-7pm</p>
            <p>Sat-Sun: CLOSED</p>
        </section>
    </article>
    <div class="clear"></div>
</section>

为什么我的div不能按照我想要的方式对齐，因为当我尝试定位它们时它们会保持重叠

2 个答案: