如何分隔开div的文字和图片？

Iki · 发表于 2020-10-15 16:44:10

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

我想将article和图片群分开，请问如何？我试过分俩个section和设置div的外边距，但都无效的样子，始终是黏在一起的样子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document1 </title>
<style>
      body{
         color:black;
         background: white;
         font-family: Arial, Helvetica, sans-serif;
         margin:0;
         padding:0;
         width:auto;

      }
      header{
         background:gray;
         margin: 20px 40px 20px 50px;
         width:auto;


      }
      section{

         background:pink;;
         color:black;
         width:auto;

         display:flex;
         flex-direction:row;
         height:700px;
      }


      article{
         text-align: center;
         position: absolute;

         font-size:xxx-large;
      width:100%;
      height:59px;
      margin:10px;
      }
   div{
         display:inline-block;
         direction:row;
         margin:20px;


   }
   #fjpg{
      margin:10px;
      width:40px;
      height:20px;
      position:absolute;
   }



      ul{
         margin:0;
         padding:0;
         list-style-type:none;

      }
      li{
         display:inline-block;
         margin:10px;
         width:auto;
         color:white;
      }

      footer{
         background:lightblue;
         height:40px;
      }
</style>
</head>
<body>

<h1>let`s start it</h1>
<header>
      <nav>
         <ul>
            <li>Google Artists & Culture</li>
            <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
            <li>Home </li>
            <li>Explore</li>
            <li>Nearby</li>
            <li>Favorite</li>
            <li><img src="download.png" height=20px; width:10px;></li>
         </ul>
      </nav>
</header>
<section>
<section>
      <div><article>Artist-Ting</article></div>





      <div class="fjpg"><img src="/ting1.jpg" alt="ting-logotingting" height="150px" width="300px"></div>
      <div  class="2ndjpg"><img src="/ting2.jpg" alt="ting2-logotingting" height="150px" width="300px"></div></section>
</section>
      <footer>footer</footer>
</body>
</html>

真的只会一点点 · 发表于 2020-10-19 14:59:14

内边距呢？

账号		自动登录	找回密码
密码			立即注册