Question

对于我正在尝试创建的示例网站，我正在尝试水平显示社交媒体而不是垂直显示...无论如何，我可以通过我的代码在此处执行此操作吗？

如果你想要我，我可以包括图片文件，但我不知道如何通过堆栈

<!DOCTYPE html>
<!--bakhriddinov-->
<!-- -->
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Final Project</title>
        <script src="index.js"></script>
        <link href="index.css" rel="stylesheet" type="text/css" />
        
        <!--font-->
        <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
        
        <link href="https://fonts.googleapis.com/css?family=Josefin+Slab" rel="stylesheet">
        
    </head>
    <body>
        <!--significant element 1 DIV-->
    	<div class='fill-screen' style = "overflow: auto; max-height: 100vh;">
            <h2><a id="top"></a></h2>
            <img src="takethejourney.png" alt="next"  height="70"/>
            
            <br>
            
        <!--significant element 2 IMAGES-->
            <a href="index2.html">
            <img src="savetheb.gif" alt="MAIN" height="400"/>
            </a>
            <br>
            <br>
            
        <!--significant element 4 LINKS TO OTHER INNER HTML-->
            <a href="">	
            <img class='make-it-fit' 
        	src=''>
            </a>   
            
            
        <!-- social medias -->    
            <p></p>
            
        <!--significant element 4 LINKS TO OTHER OUTER HTML-->
            <a href="https://www.facebook.com/greenpeace.international?fref=ts">
                <img src="64x64facebook.png" alt="greenpeace's facebook" height="20" width="20"/>
            </a>    
            
            <p></p>  
            
            <a href="https://twitter.com/Greenpeace">
                <img src="64x64twitter.png" alt="greenpeace's twitter" height="20" width="20"/>
            </a>
            
            <p></p>
            
            <a href="https://www.youtube.com/user/GreenpeaceVideo">
                <img src="64x64youtube.png" alt="greenpeace's youtube" height="20" width="20"/>
            </a>
            
            <p></p>
            
            <a href="http://www.greenpeace.org/">
                <img src="greenpeace_logo.png" alt="greenpeace" height="20"/>
            </a>
            
            <p></p>
			</div>
    </body>
</html>

{{1}}

谢谢

Answer 1

让图像彼此相邻显示而不会改变太多的最简单方法是将它们简单地包装在容器<div>中。它甚至不需要任何造型！

＆＃13;

.fill-screen {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
}

.make-it-fit {
  max-width: 99%;
  max-height: 99%;
}

@font-face {
  font-family: 'Poppins', sans-serif;
  font-family: 'Josefin Slab', serif;
}

body {
  background-color: #f9f9f9;
}

fieldset {
  margin-top: 1em;
  margin-bottom: 1em;
  padding: .5em;
}

legend {
  color: blue;
  font-weight: bold;
  font-size: 85%;
  margin-bottom: .5em;
}

label {
  float: left;
  width: 90px;
}

input,
select {
  margin-left: 1em;
  margin-right: 1em;
  margin-bottom: .5em;
}

input {
  width: 14em;
}

input[type="radio"],
input[type="checkbox"] {
  width: 1em;
  padding-left: 0;
  margin-right: 0.5em;
}

＆＃13;

<body>
  <!--significant element 1 DIV-->
  <div class='fill-screen' style="overflow: auto; max-height: 100vh;">
    <h2>
      <a id="top"></a>
    </h2>
    <img src="takethejourney.png" alt="next" height="70" />

    <br>

    <!--significant element 2 IMAGES-->
    <a href="index2.html">
      <img src="savetheb.gif" alt="MAIN" height="400" />
    </a>
    <br>
    <br>

    <!--significant element 4 LINKS TO OTHER INNER HTML-->
    <a href="">
      <img class='make-it-fit' src=''>
    </a>


    <!-- social medias -->
    <div>

      <!--significant element 4 LINKS TO OTHER OUTER HTML-->
      <a href="https://www.facebook.com/greenpeace.international?fref=ts">
        <img src="http://placehold.it/100" alt="greenpeace's facebook" height="20" width="20" />
      </a>

      <a href="https://twitter.com/Greenpeace">
        <img src="http://placehold.it/100" alt="greenpeace's twitter" height="20" width="20" />
      </a>

      <a href="https://www.youtube.com/user/GreenpeaceVideo">
        <img src="http://placehold.it/100" alt="greenpeace's youtube" height="20" width="20" />
      </a>

      <a href="http://www.greenpeace.org/">
        <img src="http://placehold.it/100" alt="greenpeace" height="20" />
      </a>

    </div>

＆＃13;

div是block元素，因此默认情况下占用父级宽度的100％。图像为inline-block，因此当在block元素内时，图像会尝试相邻显示。

希望这有帮助！：）

如何通过html或css水平显示链接的图像

1 个答案: