个人中心
gpt4 book ai didi

html - 部分不保持在同一水平

转载 作者：行者123 更新时间：2023-11-28 15:50:03 25 4
gpt4 key购买 nike

我是 HTML/CSS 的新手，我正在尝试构建一个简单的网站。我的 HTML 代码:

<!DOCTYPE html>

<html>
<head>
 <title>  Motors </title>
 <script src="jquery-3.1.1.js"></script>
 <link href="style.css" rel = "stylesheet" type="text/CSS" />
</head>
<body>
 <header>
    <h1 id="cmpName">
        MOTORS
    </h1>
    <nav>
        <ul id = "navigation">
            <li> <a href="#"> HOME  </a> </li>
            <li> <a href="#"> CATALOGUE </a> </li>
            <li> <a href="#"> ACHIVEMENTS </a> </li>
            <li> <a href="#"> ABOUT US </a> </li>
            <li> <a href="#"> CONTACT </a> </li>
        </ul>
    </nav>
    <div id = "slideDiv">
        <img class="slideImg" src="http://eskipaper.com/images/toyota-wallpaper-2.jpg" />
        <img class="slideImg" src="http://www.hdwallpapers.in/walls/2013_lamborghini_aventador_lp700_4-wide.jpg"/> 
        <img class="slideImg" src="https://images7.alphacoders.com/318/318873.jpg"/> 
        <img class="slideImg" src="https://wallpaperscraft.com/image/ferrari_red_cars_sport_95424_3840x2400.jpg"/> 
    </div>
</header>
<section id="mainContent">
    <section class="oneNews">
        <h3 class = "newsHeader"> New Headquarters </h3> 
        <img src="http://acdn.architizer.com/thumbnails-PRODUCTION/ee/87/ee87914abbec5ba91890ea35110e7a0b.jpg" class = "newsImg"/>
        <p class="newsDscr"> The headquarters for Spanish energy utility provider Endesa fuses innovative workplace design with a progressive environmental program. </p>
    </section>

    <section class="oneNews">
        <h3 class = "newsHeader"> Shchumacher Wins </h3> 
        <img src="https://formula1.files.wordpress.com/2011/03/season2011_race1_wallpapers_01_1280x1024.jpg" class = "newsImg"/>
        <p class="newsDscr"> In winning the Drivers' Championship he equalled the record set by Juan Manuel Fangio of five World Championships. Ferrari won 15 out of 17 races, and Schumacher won the title with six races remaining in the season. </p>
    </section>

</section>
</body>
</html>

我的 CSS 看起来像这样:

@import url('https://fonts.googleapis.com/css?family=Inconsolata');



html,body{
 margin: 0;
 padding: 0;
 background-color: #708ebf;
}
a {
 text-decoration: none;
 color: black;
}
header {
 width: 900px;
 background-color: #0543a8;
 margin-left: auto;
 margin-right: auto;
 padding-bottom: 0;
 padding-top: 0;
}
#cmpName {

 text-align: center;
 font-family: 'Inconsolata', monospace;
 font-size: 60px;
 margin: 0;
}
nav {
 margin: 0;
}
#navigation {
 background-color: #0d52c1;
 text-align: center;
 padding: 0;
 margin: 0;
 margin-bottom: 20px;
 margin-top: 20px;

}
#navigation li {
 list-style-type: none;
 font-family: 'Inconsolata', monospace;
 display: inline;
 font-size: 30px;
 margin-left: 19px;
 margin-right: 19px;
 color: black;
}
#slideDiv{
 width: 900px;
 height: 450px;
 margin-left: auto;
 margin-right: auto;
 position: relative;
 right: 5px;
 margin-bottom: 0;
 padding-bottom: 0;
}
.slideImg {
 width: 900px;
 height: 450px;
 display: inline;
 position: absolute;
 margin: 5px;
 margin-top: 0;
 margin-bottom: 0;
 padding-bottom: 0;
}
#mainContent {
 width: 900px;
 margin-left: auto;
 margin-right: auto;
 border: solid;
 padding: 0;

}
.oneNews {
 display: inline-block;
 border: solid;
 margin: 10px;
 width: 270px;
 height: 500px;
 padding: 0;
}
.newsImg {
 width: 270px;
 height: 150px;
 padding: 0;
 margin: 0;

}
.newsDscr {
 width: 270px;
 text-align: center;
 height: 120px;
 margin: 0;
 padding: 0;
}
.newsHeader {
 width: 270px;
 text-align: center;
 padding: 0;
 margin: 0;
}

在页面底部，如您所见，有两个部分 (class = "oneNews")，但根据它们的描述，它们的对齐方式不同并且不会保持相同的水平。任何建议为什么？P.S 我找不到任何包含相同含义的问题，但如果有的话请链接，我会删除这个问题。

最佳答案

为您的类(class)添加垂直对齐。试试这个:

.oneNews {
    display: inline-block;
    border: solid;
    margin: 10px;
    width: 270px;
    height: 500px;
    padding: 0;
    vertical-align: top;
}

关于html - 部分不保持在同一水平，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42040024/

25 4 0
文章推荐： javascript - div 内的两个 span 元素都不可点击
文章推荐： javascript - .removeClass 在多个项目上？
文章推荐： javascript - 如何在 div html 属性上设置过滤器
文章推荐： IOS 构建良好但在设备上运行时出错
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com