Question

非常适合HTML和CSS。无法让我的文字在我的图片下移动。我有4张图片，在它们下面，我想成为一段文字。这可能是一个愚蠢的问题所以请原谅我的无知。我不能让文本移动到我想要的位置（并且CSS文件中的值，像素方面是错误的，但是我甚至无法将其中的3个显示为尝试将其调整为在我的导航栏或图像下方？）。图像以正确的顺序显示并且格式正确。

试图看起来像这样： https://gyazo.com/c3de4fa6832107a8f16300cbacca47f8

提前致谢

这是我的CSS / HTML文件：

.img {
    position: relative;
    float: left;
    width:  250px;
    height: 250px;
    background-position: 50% 50%;
    background-repeat:   no-repeat;
    background-size:     cover;
    padding-top: 100px;
}

.text1 {
	position:relative;
	left:100px;
	top:400px: 
}
.text2 {
	position:relative;
	left:200px;
	top:400px: 
}
.text3 {
	position:absolute;
	left:300px;
	top:400px: 
}
.text4 {
	position:absolute;
	left:400px;
	top:400px: 
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>About</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="about.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="index.html">Title</a>
    </div>
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="links.html">Links</a></li>
        <li><a href="#">LinkedIn</a></li>
        <li><a href="#">Github</a></li>
      </ul>
    </div>
  </div>
</nav>
  
<div class="container">
	<img src="images/xxx.jpg" class="img-circle img">
	
	<img src="images/xxx.jpg" class="img-circle img">

	<img src="images/xxx.jpg" class="img-circle img">

	<img src="images/xx.jpg" class="img-circle img">



	<div id="text1">
		 <p>TEXT UNDER PIC 1</p>
	</div >
    <div id="text1">
		 <p>TEXT UNDER PIC 2</p>
	</div >
    <div id="text1">
		 <p>TEXT UNDER PIC 3</p>
	</div >
    <div id="text1">
		 <p>TEXT UNDER PIC 4</p>
	</div >


</div>

</body>
</html>

Answer 1

您的文字没有按照您的意愿调整的原因是因为默认情况下<p>和<div>是块级元素，这意味着它们会填充空间并且从新线开始。要解决此问题，您可以将display属性更改为内联。

那就是说，你接近这个错误，你不会将你的形象和标题分组在一起。你的结构应该更符合以下几点：

<div class="container">
    <!-- Image One -->
    <div class="image-container">
        <img src="#.jpg" alt="a" class="img-circle img" />

        <div class="image-text">
            <p>Lorem ipsum...</p>
        </div>
    </div>

    <!-- Image Two -->
    <div class="image-container">
        <img src="#.jpg" alt="a" class="img-circle img" />

        <div class="image-text">
            <p>Lorem ipsum...</p>
        </div>
    </div>

    <!-- Image Three -->
    <div class="image-container">
        <img src="#.jpg" alt="a" class="img-circle img" />

        <div class="image-text">
            <p>Lorem ipsum...</p>
        </div>
    </div>
</div>

然后，您可以在.image-container课程中设置所需的宽度，并且您的图片和字幕将会跟随套件。

Answer 2

http://codepen.io/lostdino/pen/LpKKra

我不确定你是否想保留你的HTML结构，或者它是否可以修改，所以我只是在你提供的限制范围内工作。我所做的是删除你的花车，而是使用display: inline-block，它会在容器内水平堆叠元素而不是垂直堆叠。您可以看到我还使用了[id*="text"]，这样可以捕获ID包含＆＃39; text＆＃39;的任何元素。我还建议远离像素，寻找更具响应性的单位，例如百分比或者rem。如果您认为我有价值向您展示我将如何解决这个问题，我非常乐意为您提供快速示例。我希望这有帮助。

.img {
    position: relative;
    display:inline-block;
    width:  250px;
    height: 250px;
    background-position: 50% 50%;
    background-repeat:   no-repeat;
    background-size:     cover;
    padding-top: 100px;
}
.text1 {
    position:relative;
    left:100px;
    top:400px: 
}
[id*="text"] {
  width: 250px;
  display: inline-block;
}

关于其他答案，假设文本和图像之间存在图像和标题关系，那么解决方案的可能改进如下：

http://codepen.io/lostdino/pen/PPrryZ

.gallery img {
  position:relative;
  width: 100%;
  height: 100%;
    background-position: 50% 50%;
    background-repeat:   no-repeat;
    background-size:     cover;
}
.gallery {
  padding-top: 100px;
  padding-left: 10px;
  position:relative;
}
.gallery > figure {
    position: relative;
    display:inline-block;
    width:  250px;
    height: 250px;
}

图库的HTML重新构建如下：

  <div class="gallery">
    <figure>
      <img src="" alt="" class="gallery-image" />
      <figcaption class="gallery-image-caption">TEXT UNDER PIC 1</figcaption>
    </figure>
    <figure>
      <img src="" alt="" class="gallery-image" />
      <figcaption class="gallery-image-caption">TEXT UNDER PIC 2</figcaption>
    </figure>
    <figure>
      <img src="" alt="" class="gallery-image" />
      <figcaption class="gallery-image-caption">TEXT UNDER PIC 3</figcaption>
    </figure>
    <figure>
      <img src="" alt="" class="gallery-image" />
      <figcaption class="gallery-image-caption">TEXT UNDER PIC 4</figcaption>
    </figure>
  </div>

Answer 3

您的段落没有以正确的顺序嵌套以实现此目的。确保将段落标记放在包含图像的div标记内。

此外，在刷新浏览器时使用inspect元素工具。在Google Chrome中，转到View，Developer，然后选择开发人员工具。浏览器底部将出现一个新窗口。当您将鼠标悬停在font-end界面上时，该页面将突出显示您的html嵌套结构。

希望这有帮助，如果您有任何其他问题，请与我联系！

无法使用CSS在HTML页面上移动文本

3 个答案: