Question

我正在为我的A-Level Media课程制作一个网站，但在使角色列表和视频在页面like this上呈水平排列时遇到了一些麻烦。（此外，我正在使用的视频目前只是一个占位符）

我尝试使用不同版本的inline:（例如：block;，; grid;等），以使两个元素对齐，尽管我得到的最简单的方法是将它们对齐我的元素对角线地。我在页面底部使用了inline: CSS合法内容（代码中未显示），尽管它确实是在普通的旧图片而不是列表和列表上使用的，但它有助于将其排列起来。视频。

这是该页面上使用的大部分代码（我已经删掉了一些您在某些网站底部看到的合法内容的部分。）如果我在此处添加过多的代码，则表示歉意。

.iconsize{
    max-height:20px;
    max-width:auto;
}

.socialmedia{
    list-style-type:none;
    text-align:left;

}


body{
    font-family: Bahnschrift SemiBold;
    color: white;
    background-color: #231828;
    text-align: center; 
    margin-left: 20px;
    float:center;
}

.sub{
    max-height:75px;
    max-width:auto;
}

.sub2{
    max-width:60%;
}

#header{
    align-content:top;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 10px;
    max-height:25%;
    max-width:auto;

}


.imgsize{
    max-height:5%;
    max-width:auto;
}




#content{
    display:inline-block;
    float:left;
}


.character{
    max-width:33%;
    max-height:auto;
    /*float:left;*/
}


#characters{
    float:left;
    text-align:left;
}

.charsize{
    max-width:33%;
    max-height:auto;
}

.nobull{
    list-style:none;
}

#interview{
    float:right;
}

<html>
    <title>CHARACTERS</title>
    <link href="media stylesheet.css" rel="stylesheet" type="text/css">
<body>

    <!-- Headers/Links -->

    <div>
        <a href='main page.html'><img src="https://66.media.tumblr.com/1c06e6d615743d3e39874fd396ad0404/tumblr_ptb3gnYXfg1w1tw8ao8_1280.png" alt="OTHERHEAD"></a>
        <img src="https://66.media.tumblr.com/c26ab239b970f06aace8e3325da2ec7a/tumblr_ptb1qjzm3g1w1tw8ao9_1280.png" alt='THE OTHER WAY IS OUT'>

        <h1>
            <a class='link' href='characters.html'>CHARACTERS</a>|
            <a class='link' href='story.html'>STORY</a>|
            <a class='link' href='gallery.html'>GALLERY</a>|
            <a class='link' href='https://www.vue.co.uk'>BUY TICKETS</a>|
            <a class='link' href='https://www.amazon.co.uk'>SHOP</a>
        </h1>
        <h2>
            Follow us on social media!<br> 
            <a class='link' href='https://www.instagram.com'><img class='iconsize'src='http://assets.stickpng.com/thumbs/580b57fcd9996e24bc43c521.png'></a>
            <a class='link' href='https://www.facebook.com'><img class='iconsize' src='https://facebookbrand.com/wp-content/themes/fb-branding/assets/images/fb-logo.png?v2'></a>
            <a class='link' href='https://sony.tumblr.com'><img class='iconsize' src='http://pluspng.com/img-png/tumblr-vector-png-tumblr-icon-logo-vector-300.png'></a>
            <a class='link' href="https://www.twitter.com"><img class='iconsize' src='http://assets.stickpng.com/thumbs/580b57fcd9996e24bc43c53e.png'></a>
        </h2>
        <br>
    </div>

    <!-- Character profiles -->

    <div id='content'>
        <div id='characters'>
            <h1>CHARACTERS</h1>
            <ul class='nobull'>
                <li><img class='charsize' src='https://66.media.tumblr.com/96b9a4eaf36f6bbb4af2a5a53ad616c7/tumblr_ptp79sro0e1w1tw8ao1_540.png' alt='text'></li>
                <li><img class='charsize' src='https://66.media.tumblr.com/96b9a4eaf36f6bbb4af2a5a53ad616c7/tumblr_ptp79sro0e1w1tw8ao1_540.png' alt='text'></li>
                <li><img class='charsize' src='https://66.media.tumblr.com/96b9a4eaf36f6bbb4af2a5a53ad616c7/tumblr_ptp79sro0e1w1tw8ao1_540.png' alt='text'></li>
            </ul>
        </div>

        <div id='interview'>
            <h1>INTERVIEW WITH PRODUCER X</h1>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/PDWQQNDTea0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
    </div>

我希望列表和视频能够像我制定的计划一样排成一行，但相反，它会在我的计算机上显示为like this。

Answer 1

在display: flex上使用#content代替inline-block可以解决您的问题。

通过display: flex，我们“告诉”子元素以“并排”显示。要了解有关展示广告的更多信息，请查看its documenation

此外，如果您使用display: flex;，则不需要使用float。但是我没有在下面的示例中删除它，因为没有必要使该示例正常工作。

.iconsize{
    max-height:20px;
    max-width:auto;
}

.socialmedia{
    list-style-type:none;
    text-align:left;

}


body{
    font-family: Bahnschrift SemiBold;
    color: white;
    background-color: #231828;
    text-align: center; 
    margin-left: 20px;
    float:center;
}

.sub{
    max-height:75px;
    max-width:auto;
}

.sub2{
    max-width:60%;
}

#header{
    align-content:top;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 10px;
    max-height:25%;
    max-width:auto;

}


.imgsize{
    max-height:5%;
    max-width:auto;
}




#content{
    display:flex;
    float:left;
}


.character{
    max-width:33%;
    max-height:auto;
    /*float:left;*/
}


#characters{
    float:left;
    text-align:left;
}

.charsize{
    max-width:33%;
    max-height:auto;
}

.nobull{
    list-style:none;
}

#interview{
    float:right;
}

<html>
    <title>CHARACTERS</title>
    <link href="media stylesheet.css" rel="stylesheet" type="text/css">
<body>

    <!-- Headers/Links -->

    <div>
        <a href='main page.html'><img src="https://66.media.tumblr.com/1c06e6d615743d3e39874fd396ad0404/tumblr_ptb3gnYXfg1w1tw8ao8_1280.png" alt="OTHERHEAD"></a>
        <img src="https://66.media.tumblr.com/c26ab239b970f06aace8e3325da2ec7a/tumblr_ptb1qjzm3g1w1tw8ao9_1280.png" alt='THE OTHER WAY IS OUT'>

        <h1>
            <a class='link' href='characters.html'>CHARACTERS</a>|
            <a class='link' href='story.html'>STORY</a>|
            <a class='link' href='gallery.html'>GALLERY</a>|
            <a class='link' href='https://www.vue.co.uk'>BUY TICKETS</a>|
            <a class='link' href='https://www.amazon.co.uk'>SHOP</a>
        </h1>
        <h2>
            Follow us on social media!<br> 
            <a class='link' href='https://www.instagram.com'><img class='iconsize'src='http://assets.stickpng.com/thumbs/580b57fcd9996e24bc43c521.png'></a>
            <a class='link' href='https://www.facebook.com'><img class='iconsize' src='https://facebookbrand.com/wp-content/themes/fb-branding/assets/images/fb-logo.png?v2'></a>
            <a class='link' href='https://sony.tumblr.com'><img class='iconsize' src='http://pluspng.com/img-png/tumblr-vector-png-tumblr-icon-logo-vector-300.png'></a>
            <a class='link' href="https://www.twitter.com"><img class='iconsize' src='http://assets.stickpng.com/thumbs/580b57fcd9996e24bc43c53e.png'></a>
        </h2>
        <br>
    </div>

    <!-- Character profiles -->

    <div id='content'>
        <div id='characters'>
            <h1>CHARACTERS</h1>
            <ul class='nobull'>
                <li><img class='charsize' src='https://66.media.tumblr.com/96b9a4eaf36f6bbb4af2a5a53ad616c7/tumblr_ptp79sro0e1w1tw8ao1_540.png' alt='text'></li>
                <li><img class='charsize' src='https://66.media.tumblr.com/96b9a4eaf36f6bbb4af2a5a53ad616c7/tumblr_ptp79sro0e1w1tw8ao1_540.png' alt='text'></li>
                <li><img class='charsize' src='https://66.media.tumblr.com/96b9a4eaf36f6bbb4af2a5a53ad616c7/tumblr_ptp79sro0e1w1tw8ao1_540.png' alt='text'></li>
            </ul>
        </div>

        <div id='interview'>
            <h1>INTERVIEW WITH PRODUCER X</h1>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/PDWQQNDTea0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
    </div>

Answer 2

请尝试使用display: flex;，因为它在处理对齐方式上具有更大的灵活性，并且还删除了float属性的使用。如果可以使用类而不是ID，也会更好。这是示例骨架代码。希望对您有帮助

.d-flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
}

.align-items-center {
  align-items: center;
}

.justify-content-center {
  justify-content: center;
}

.header {
  border: 1px solid black;
  padding: 10px;
  margin-bottom: .5rem;
}

.character-card {
  border: 1px solid black;
  padding: 10px;
  margin-bottom: .5rem;
}

.character-img {
  margin-right: .5rem;
}

.characters-container {
  margin-right: .5rem;
}

.flex-grow-1 {
  flex-grow: 1
}

<div class="header d-flex flex-column align-items-center justify-content-center">
  <span>HEADER</span>
</div>

<div class="d-flex flex-row">
  <div class="characters-container d-flex flex-column">
    <div class="character-card d-flex flex-row align-items-center">
      <img class="character-img" src="https://via.placeholder.com/50">
      <span>Character Details</span>
    </div>
    <div class="character-card d-flex flex-row align-items-center">
      <img class="character-img" src="https://via.placeholder.com/50">
      <span>Character Details</span>
    </div>
    <div class="character-card d-flex flex-row align-items-center">
      <img class="character-img" src="https://via.placeholder.com/50">
      <span>Character Details</span>
    </div>
  </div>
  <div class="video-container d-flex flex-column flex-grow-1 align-items-center">
    <span>Video</span>
    <img src="https://via.placeholder.com/150">
  </div>
</div>

无法水平对齐列表和视频

2 个答案: