Question

我正在尝试创建我网站的一部分，其中有多个图片连续显示在他们之上。我已经连续制作了图片，但我也无法将标题连续放在上面。我试过使用display：inline;对于两者，但它似乎没有用。这个问题的解决方案是什么。

<DOCTYPE! HTML>
<html>

<head>

    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script src='script.js' type='text/javascript'></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>

  <div id="navbar">
      <div id="nav-container">
        <h1>PORTFOLIO</h1>
        <a href="#">Logo Design</a>
        <a href="#">Business Cards</a>
        <a href="posters+flyers.html">Posters & Flyers</a>
        <a id="web" href="#">Website Design</a>

      </div>
  </div>
        <div id='webdsn-drop'>
            <div id="webdsn-content">
                <h2 id="webname">WEBSITE DESIGN</h2>
            </div>
        </div>  


  <div id="banner-container">
    <h1>LOREM IPSUM<br>SAMPLE<h1> 
    <h2>Lorem Ipsum Sample Lorem Ipsum Sample</h2>
  </div>

 <div id="thmbnl-container">  

  <div class="ctgrs-container">
    <a href="#">
      <img src="https://image.freepik.com/free-vector/workspace-banners_23-2147509206.jpg">
      <h1>Web Design</h1>
    </a> 
  </div>


   <div class="ctgrs-container">
    <a href="posters+flyers.html">
      <img src="https://image.freepik.com/free-psd/blue-company-poster_23-2147493194.jpg">
      <h1>Posters & Flyers</h1>
    </a>  
  </div> 


   <div class="ctgrs-container">
     <a href="#">
      <img src="https://image.freepik.com/free-vector/blue-wave-business-card-design_1017-4370.jpg">
      <h1>Business Cards</h1>
     </a> 
  </div>

  <div class="ctgrs-container">
    <a href="#">
      <img src="https://image.freepik.com/free-vector/abstract-logo-template_23-2147490980.jpg">
      <h1>Logo Design</h1>
     </a> 
  </div>

  </div> 

  <h2 id="recent-title">Recent Projects</h2>
  <div id="recent">
    <div id="recent-container">
        <div class="thmbnl-recent">
            <img src="http://placehold.it/190x190">
            <h1>Sample</h1>
        </div>  
        <div class="thmbnl-recent">
            <img src="http://placehold.it/190x190">
            <h1>Sample</h1>
        </div>
        <div class="thmbnl-recent">
            <img src="http://placehold.it/190x190">
            <h1>Sample</h1>
        </div>
        <div class="thmbnl-recent">
            <img src="http://placehold.it/190x190">
            <h1>Sample</h1>
        </div>  
        <div class="thmbnl-recent">
            <img src="http://placehold.it/190x190">
            <h1>Sample</h1>
        </div>
        <div class="thmbnl-recent">
            <img src="http://placehold.it/190x190">
            <h1>Sample</h1>
        </div>
        <div class="thmbnl-recent">
            <img src="http://placehold.it/190x190">
            <h1>Sample</h1>
        </div>
    </div>
  </div>

</body>

.mobile_title {
  margin-top: 25px;
  font-size: 25px;
  color: black;
  margin-left: 65px;
  font-family: 'Oswald', sans-serif;
}

.web_title {
  margin-top: 25px;
  font-size: 25px;
  color: black;
  margin-left: 200px;
  font-family: 'Oswald', sans-serif;
  display: inline-block;
}

.mobile {
  margin-top: 30px;
  margin-left: 100px;
  display: inline-block;
}

.mobile1 {
  margin-top: 30px;
  margin-left: 25px;
  display: inline-block;
}

.laptop {
  margin-left: 200px;
  margin-top: 45px;
  display: inline-block;
}

.coding {
  margin-left: 200px;
  margin-top: 45px;
  display: inline-block;
}

.database {
  margin-left: 200px;
  margin-top: 45px;
  display: inline-block;
}

移动标题是第一个。我知道需要知道如何将其他标题合并到同一行。非常感谢您的帮助

Answer 1

使用CSS float 属性或使用表格。虽然使用表格作为布局元素并不是一种正确的方法。它确实有帮助。

有时候，如果你把很多元素都浮到一边，那么CSS float会变得非常令人沮丧。建议使用表格。标题使用一行，图像使用第二行。

<table>
<tr><td> Heading 1 </td><td>Heading 2</td></tr>
<tr><td> Image tag 1 </td><td>Image tag2</td></tr>
</table>

您可以详细了解表Here

Answer 2

使用bootstrap的行和列类比使用vanilla css容易实现。您可以使用他们的CDN将您的html文件链接到bootstrap，并为每个标题和图像集添加列类：

<div class="row">
  <div class="col-md-2 text-center">
    <div class="mobile_title">Mobile Development</div>
    <img src="mobile.png" width=50 height=100 class="mobile">
  </div>
  <div class="col-md-2 text-center">
    <div class="mobile_title">Mobile Development</div>
    <img src="mobile.png" width=50 height=100 class="mobile">
  </div>
</div>

这就是你的html代码最终会是什么样子。确保所有列类都包含在行类中。要在您的html代码中添加引导程序，只需点击此链接并复制您在页面上看到的第一个链接标记，然后将其粘贴到html主题部分的底部：Bootstrap CDN

如何在html下面用图片将标题放在一起

2 个答案: