时间戳

首页 > 解决方案 > HTML 和 CSS 图像不会彼此相邻出现（即使使用“浮动”也不会！）

html - HTML 和 CSS 图像不会彼此相邻出现（即使使用“浮动”也不会！）

问题描述

我试图在<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>

我错过了什么？

提前致谢！

标签： htmlcssimage

解决方案

从<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>

推荐阅读