無法使用CSS在HTML頁面上移動文本

對於HTML和CSS來說很新穎。無法讓我的文字在我的圖片下移動。我有4張圖片，下面我想成爲一段文字。這可能是一個愚蠢的問題，請原諒我的無知。我不能讓文本移動到我想要的位置（並且CSS文件中的值是像素明智的，但我甚至不能讓其中的3個顯示出來，試圖將它們調整爲在我的導航欄或圖像下方？）。圖像以正確的順序顯示，格式正確。無法使用CSS在HTML頁面上移動文本

好一會這個樣子： https://gyazo.com/c3de4fa7a8f16300cbacca47f8

在此先感謝

這裏是我的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 { 
 
\t position:relative; 
 
\t left:100px; 
 
\t top:400px: 
 
} 
 
.text2 { 
 
\t position:relative; 
 
\t left:200px; 
 
\t top:400px: 
 
} 
 
.text3 { 
 
\t position:absolute; 
 
\t left:300px; 
 
\t top:400px: 
 
} 
 
.text4 { 
 
\t position:absolute; 
 
\t left:400px; 
 
\t 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"> 
 
\t <img src="images/xxx.jpg" class="img-circle img"> 
 
\t 
 
\t <img src="images/xxx.jpg" class="img-circle img"> 
 

 
\t <img src="images/xxx.jpg" class="img-circle img"> 
 

 
\t <img src="images/xx.jpg" class="img-circle img"> 
 

 

 

 
\t <div id="text1"> 
 
\t \t <p>TEXT UNDER PIC 1</p> 
 
\t </div > 
 
    <div id="text1"> 
 
\t \t <p>TEXT UNDER PIC 2</p> 
 
\t </div > 
 
    <div id="text1"> 
 
\t \t <p>TEXT UNDER PIC 3</p> 
 
\t </div > 
 
    <div id="text1"> 
 
\t \t <p>TEXT UNDER PIC 4</p> 
 
\t </div > 
 

 

 
</div> 
 

 
</body> 
 
</html>

來源

2015-11-28 Mike

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

我不知道，如果你想保持你的HTML結構，或者如果它是開放的修訂工作，我是你提供的約束內只是工作。我所做的是取消你的浮游物，而是使用display: inline-block，這將水平堆疊元素，而不是垂直堆放在它們的容器內。你可以看到我也使用了[id*="text"]，它將允許捕獲任何包含'text'的id的元素。我建議也從像素移開，並尋找更靈敏的單位，例如百分比或物品。如果你認爲我有價值向你展示我將如何解決這個問題，我非常樂意爲你提供一個快速的例子。我希望這有幫助。

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

來源

2015-11-28 01:39:21

這對我的工作非常有效！你是否同意其他人的觀點，我應該把我的形象和文字放在一個單獨的div裏面？謝謝，非常感謝！ – Mike

它取決於文本和圖像之間的關係，如果它們不相關，那麼我們應該將它們放在單獨的容器div甚至節元素中：'

'。如果關係是圖片和標題，那麼我們應該做的就是用數字標籤來包裝它們，如下所示：'

'我會在上面的回答中添加一個這樣的例子:) –

@ Peter_McArthur非常感謝您抽出寶貴時間來解釋並告訴我實施情況。隨着我繼續學習，我會牢記這一點！顯然，我有一個方法去！再次表達我的感激之情。 – Mike

的原因，你的文字沒有按照您的意願排列，因爲<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類所需的寬度，以及圖像和字幕將按照套件。

來源

2015-11-28 01:39:14

您的段落沒有按照正確的順序嵌套以實現此目的。確保將段落標籤放置在包含圖像的div標籤內。

另外，在刷新瀏覽器時使用inspect元素工具。在谷歌瀏覽器中，轉到查看，開發人員，然後選擇開發人員工具。瀏覽器底部會出現一個新窗口。當您將鼠標懸停在字體結束界面上時，該頁面將突出顯示您的html嵌套結構。

希望這有助於，讓我知道如果您有任何問題！

來源

2015-11-28 01:39:48

無法使用CSS在HTML頁面上移動文本

回答

相關問題