HTML 和 CSS 图像不会并排出现（即使是“浮动”！）答案

【问题标题】：HTML and CSS Images Won´t Appear Next To Each Other (Not even with "float"!)HTML 和 CSS 图像不会并排出现（即使是“浮动”！）
【发布时间】：2020-03-04 07:02:17
【问题描述】：

我试图在<div> 中并排浮动两个图像。除了将图像的宽度设置为 50% 之外，我还尝试使用 float 和 display="inline block" 属性。

然而不知何故，它们仍然出现在彼此上方和下方，而不是彼此相邻。

这是我的代码：

<head>

    <meta charset="utf-8">
    <link href="https://fonts.googleapis.com/css?family=Abril+Fatface&display=swap" rel="stylesheet">

    <style type="text/css"> 

        * {font-family: "Abril Fatface";}

        header {display:block;align-self: right;}

        div {display:block; }
         #bodydiv {width:800px;}

        #footerdiv {padding-top:10px;display: block;clear:both;background-color:#00EBCF;font-size:15px;}

         h1 {font-family: "Abril Fatface";background-color:#00EBCF;;display:block;text-align:center;} 
        @media only screen and (min-width: 800px) {

            h1 {font-family: "Abril Fatface";background-color:#00EBCF;display:block;text-align:center;font-size:45px;} 

         li {float:left;margin-right: 10px;display: inline-block;} 






         a:link {text-decoration:none;color:black;font-family: "Abril Fatface";font-color:green;font-size:20px;background-color:#94b8b8;border-radius: 10px;padding:10px;position:relative; display:inline-block;} 
        a:hover {text-decoration: none;font-family: "Abril Fatface";background-color:#A6A6A6;}
          }

          @media only screen and (max-width: 799px) {

            h1 {font-family: "Abril Fatface";background-color:#00EBCF;display:block;text-align:center;font-size:30px;} 


         li {float:left;margin-right: 10px;display: inline-block;} 



         a:link {text-decoration:none;color:black;font-family: "Abril Fatface";font-color:green;font-size:15px;background-color:#94b8b8;border-radius: 8px;padding:8px;position:relative; display:inline-block;} 
        a:hover {text-decoration: none;font-family: "Abril Fatface";background-color:#A6A6A6;}
          }

           @media only screen and (max-width: 557px) {

            h1 {font-family: "Abril Fatface";background-color:#00EBCF;display:block;text-align:center;font-size:25px;} 

         li {float:left;margin-right: 10px;display: inline-block;} 



         a:link {text-decoration:none;color:black;font-family: "Abril Fatface";font-color:green;font-size:10px;background-color:#94b8b8;border-radius: 4px;padding:4px;position:relative; display:inline-block;} 
        a:hover {text-decoration: none;font-family: "Abril Fatface";background-color:#A6A6A6;}
          }
        ul {list-style: none;}

    </style>


</head>

    <body>

        <header> <h1> Yaddah Yaddah blah blah</h1></header>

        <div style="margin-bottom: 50px;margin-top: 10px">
            <ul>
                <li><a href="#">blah blah </a></li>
                <li><a href="#">blah blah</a></li>
                <li><a href="#">random text</a></li>
                <li><a href="#">more random text </a></li>
                <li><a href="#">blah blah </a></li>




            </ul>



        </div>

        <div id="bodydiv">

            <img src= "random.jpeg" width=50%; display="inline-block" >
            <img src= "r.jpg" width=50% height="50%" display="inline-block"; float="right"; >


        </div>

        <div id="footerdiv">

            Yaddah yaddah yaddah
        </div>




    </body>

我错过了什么？

提前致谢！

【问题讨论】：

display 是一个样式属性，而不是一个属性。 style="display:inline-block" 可能会为您做点什么。或者，如果使用浮动，则先放置浮动元素。

标签： html css image

【解决方案1】：

从<img> 标签中删除除src 之外的所有属性，并将此代码添加到您的css 以设置元素样式：

#bodydiv img{
  width:50%;
  display:inline-block;
  height:50%;
  float:left;
}

对于大多数样式，您不能将它们声明为 html 属性，除非在 style 属性中定义它们，这会将 css 应用于该元素。

还有font-color 实际上只是color。

这里是这些修复的代码（我用占位符图像替换了图像 src 值，以便每个人都可以看到它的工作）：

<head>

  <meta charset="utf-8">
  <link href="https://fonts.googleapis.com/css?family=Abril+Fatface&display=swap" rel="stylesheet">

  <style type="text/css">
 * {
      font-family: "Abril Fatface";
    }
    header {
      display: block;
      align-self: right;
    }
    div {
      display: block;
    }
    #bodydiv {
      width: 800px;
    }
    #bodydiv img{
      width:50%;
      display:inline-block;
      height:50%;
      float:left;
    }

    #footerdiv {
      padding-top: 10px;
      display: block;
      clear: both;
      background-color: #00EBCF;
      font-size: 15px;
    }
    h1 {
      font-family: "Abril Fatface";
      background-color: #00EBCF;
      ;
      display: block;
      text-align: center;
    }

    @media only screen and (min-width: 800px) {
      h1 {
        font-family: "Abril Fatface";
        background-color: #00EBCF;
        display: block;
        text-align: center;
        font-size: 45px;
      }
      li {
        float: left;
        margin-right: 10px;
        display: inline-block;
      }
      a:link {
        text-decoration: none;
        color: black;
        font-family: "Abril Fatface";
        color: green;
        font-size: 20px;
        background-color: #94b8b8;
        border-radius: 10px;
        padding: 10px;
        position: relative;
        display: inline-block;
      }
      a:hover {
        text-decoration: none;
        font-family: "Abril Fatface";
        background-color: #A6A6A6;
      }
    }

    @media only screen and (max-width: 799px) {
      h1 {
        font-family: "Abril Fatface";
        background-color: #00EBCF;
        display: block;
        text-align: center;
        font-size: 30px;
      }
      li {
        float: left;
        margin-right: 10px;
        display: inline-block;
      }
      a:link {
        text-decoration: none;
        color: black;
        font-family: "Abril Fatface";
        color: green;
        font-size: 15px;
        background-color: #94b8b8;
        border-radius: 8px;
        padding: 8px;
        position: relative;
        display: inline-block;
      }
      a:hover {
        text-decoration: none;
        font-family: "Abril Fatface";
        background-color: #A6A6A6;
      }
    }

    @media only screen and (max-width: 557px) {
      h1 {
        font-family: "Abril Fatface";
        background-color: #00EBCF;
        display: block;
        text-align: center;
        font-size: 25px;
      }
      li {
        float: left;
        margin-right: 10px;
        display: inline-block;
      }
      a:link {
        text-decoration: none;
        color: black;
        font-family: "Abril Fatface";
        color: green;
        font-size: 10px;
        background-color: #94b8b8;
        border-radius: 4px;
        padding: 4px;
        position: relative;
        display: inline-block;
      }
      a:hover {
        text-decoration: none;
        font-family: "Abril Fatface";
        background-color: #A6A6A6;
      }
    }

    ul {
      list-style: none;
    }   
  </style>
</head>
<body>
  <header>
    <h1> Yaddah Yaddah blah blah</h1>
  </header>
  <div style="margin-bottom: 50px;margin-top: 10px">
    <ul>
      <li><a href="#">blah blah </a></li>
      <li><a href="#">blah blah</a></li>
      <li><a href="#">random text</a></li>
      <li><a href="#">more random text </a></li>
      <li><a href="#">blah blah </a></li>
    </ul>
  </div>
  <div id="bodydiv">
    <img src="https://via.placeholder.com/500" display="inline-block">
    <img src="https://via.placeholder.com/500" height="50%" display="inline-block" ; float="right" ;>
  </div>
  <div id="footerdiv">
    Yaddah yaddah yaddah
  </div>
</body>

【讨论】：

【解决方案2】：

欢迎来到 SO！您提供的示例有足够的错误，我强烈建议您复习一些初学者教程。我并不是说这很粗鲁，只是想帮助你学习正确的语义和语法，而不必解释每个问题，这些问题只会让你更加沮丧，因为你有更多的错误行为，尤其是当你尝试支持不同的浏览器移动时前进。

与此同时，这里有一个我认为您所追求的示例？干杯！

html {
  font-family: "Abril Fatface";
}

#header {
  text-align: center;
  background-color:#00EBCF;
}

#navigation {
  margin-top: 10px;
  margin-bottom: 50px;
  text-align: center;
}

#navigation ul {
  list-style: none;
}

#navigation li {
  margin-right: 10px;
  display: inline-block;
}

#bodydiv {
  width: 800px;
  
}

#footerdiv {
  padding-top: 10px;
  background-color: #00EBCF;
  font-size:15px;
}

.side-by-side-children-example {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}


a {    
  font-size: 20px;
  background-color: #94b8b8;
  text-decoration: none;
} 
  
a:hover {
  text-decoration: none;
  background-color:#A6A6A6;
}
 

@media only screen and (min-width: 800px) {

  h1 {
    font-size: 45px;
  }   

  a {
    font-size: 20px;
    border-radius: 10px;
    padding: 10px;
  } 
  
}

@media only screen and (max-width: 799px) {

  h1 {
    font-size:30px;
  } 

  a {
    font-size: 15px;
    border-radius: 8px;
    padding:8px;
  }
  
}

@media only screen and (max-width: 557px) {

  h1 {
    font-size:25px;
  } 

  a {
    font-size: 10px;
    border-radius: 4px;
    padding: 4px;
  }
}

<link href="https://fonts.googleapis.com/css?family=Abril+Fatface&display=swap" rel="stylesheet">


<header id="header">
  <h1>Yaddah Yaddah blah blah</h1>
</header>

<nav id="navigation">
    <ul>
        <li><a href="#">blah blah </a></li>
        <li><a href="#">blah blah</a></li>
        <li><a href="#">random text</a></li>
        <li><a href="#">more random text </a></li>
        <li><a href="#">blah blah </a></li>
    </ul>
</nav>

<section id="bodydiv">

  <div class="side-by-side-children-example">
    <img src="https://picsum.photos/200">
    <img src="https://picsum.photos/200">
  </div>

</section>

<div id="footerdiv">
    Yaddah yaddah yaddah
</div>

【讨论】：

谢谢！我忘记了 display 属性是一个样式属性。