Question

我无法弄清楚这一点。

我将divs设置为display:inline-block。由于某种原因，左下角的div想要错位。

HTML看起来很干净。和CSS一样。

<section class="top" data-type="background" data-speed="10" class="pages">
        <section id="s">
            <div class="title">Services</div>
                <div class="service">
                    <div class="serviceTitle"><h2>Domain & Hosting</h2></div>
                    <div class="serviceText"><p>Need to set up a domain name and web hosting account? Not sure where to start? Leave it to me!</p></div>
                </div>
                <div class="service">
                    <div class="serviceTitle"><h2>Bespoke Design</h2></div>
                    <div class="serviceText"><p>Web design which enhances your individual or business's image and caters to your target audience's needs.</p></div>
                </div>
                <div class="service">
                    <div class="serviceTitle"><h2>Responsive Design</h2></div>
                    <div class="serviceText"><p>I make sure your site looks great no matter which device it is viewed on, bringing you and your website into the mobile world.</p></div>
                </div>
                <div class="service">
                    <div class="serviceTitle"><h2>Maintenance</h2></div>
                    <div class="serviceText"><p>Maintaining and updating your web presense is a necessity that can often be overlooked. Leave the task to me for a set monthly fee.</p></div>
                </div>      
         </section>
</section>

.service {
    display:inline-block;
    margin:20px;
    background:pink;    
}

.serviceTitle {
    text-align:center;
    font-weight:600;
    width:400px;
    height:56px;
    color:#fff;
    background:url(../_images/title.png);
    margin-bottom:10px;
}

.serviceText {
    height:200px;
    width:400px;
    background:red;
}

Answer 1

将vertical-align:top添加到div元素中。

Answer 2

使用vertical-align：top;

设置div.service css

Answer 3

这很简单，没有css将对齐部分添加到div中，如下所示：

<div align="left">
\\or
<div align="right">
\\or
<div align="center">
\\etc...

添加到每个div标签，使其看起来像这样：

<section class="top" data-type="background" data-speed="10" class="pages">
        <section id="s">
            <div align="left" class="title">Services</div>
                <div align="left" class="service">
                    <div align="left" class="serviceTitle"><h2>Domain & Hosting</h2></div>
                    <div align="left" class="serviceText"><p>Need to set up a domain name and web hosting account? Not sure where to start? Leave it to me!</p></div>
                </div>
                <div align="left" class="service">
                    <div align="left" class="serviceTitle"><h2>Bespoke Design</h2></div>
                    <div align="left" class="serviceText"><p>Web design which enhances your individual or business's image and caters to your target audience's needs.</p></div>
                </div>
                <div align="left" class="service">
                    <div align="left" class="serviceTitle"><h2>Responsive Design</h2></div>
                    <div align="left" class="serviceText"><p>I make sure your site looks great no matter which device it is viewed on, bringing you and your website into the mobile world.</p></div>
                </div>
                <div align="left" class="service">
                    <div align="left" class="serviceTitle"><h2>Maintenance</h2></div>
                    <div align="left"class="serviceText"><p>Maintaining and updating your web presense is a necessity that can often be overlooked. Leave the task to me for a set monthly fee.</p></div>
                </div>      
         </section>
</section>

这是左对齐，只是根据我编写的第一组标签进行更改以满足您的需求

DIV无缘无故地移动了？

3 个答案: