Css - 圖放置

大家好，我對HTML5/CSS相當陌生，所以我需要一些幫助。Css - 圖放置

問題是圖像不會進入框內。
它的當前位置在框的左下角。
我想將它放在左側的盒子，我只是被困作爲對圖像的右側的H2和P什麼我失蹤

此外，有好的，如果我爲每個html元素創建一個id？它似乎有太多的元素，這是在網頁設計中皺起了眉頭？如果是這樣，那麼這樣做的正確方法是什麼？

非常感謝提前

#featPost { 
 
\t \t padding:70px 0px 0px 51.2px; 
 
\t /* \t background-color: orange;*/ 
 
\t } 
 
\t 
 
\t #featPost section { 
 
\t width: 750px; 
 
\t height: 261px; 
 
\t border-style: double; 
 
\t border-width: 4px; 
 
\t border-color: black; 
 
\t 
 
\t } 
 
\t 
 
\t #featPost figure { 
 
\t \t position: relative; 
 
\t \t padding-right:20px; 
 
\t \t float:left; 
 
\t \t 
 
\t } 
 
\t 
 
\t #featPost h1 { 
 
\t \t font-family: "Calibri", Helvetica, sans-serif; 
 
\t } 
 
\t 
 
\t #featPost h2 { 
 
\t \t padding: 50px 0px 10px 41.5px; 
 
\t \t font-size: 30px; 
 
\t \t text-align: center; 
 
\t \t font-family: "Calibri", Helvetica, sans-serif; 
 
\t \t 
 
\t } 
 
\t 
 
\t 
 
\t #featPost section{ 
 
\t \t border-style: double; 
 
\t \t border-width: 4px; 
 
\t \t border-color: black; 
 
\t 
 
\t } 
 
\t 
 
\t #featPost p { 
 
\t \t padding-bottom: 150px; 
 
\t \t font-size: 20px; 
 
\t }

<aside id="featPost"><article> 
 
\t \t 
 
\t \t <h1> Featured Post </h1> \t 
 

 
\t \t <section> 
 
\t \t \t <h2> Essay as Easy as 1,2,3 </h2> 
 
\t \t \t <figure> 
 
\t \t \t <img src="images/example.png" width="250" height="250" alt="image of an egg"> 
 
\t \t \t </figure> 
 
\t \t \t <p> What? There are rules in writing an essay?? <a href="writing_art1.html" title="Read more">Read more</a></p> 
 
\t \t </section> 
 
</article></aside> 
 
\t

來源

2015-05-04 Moo Moo

你的截面高度爲261px和裏面有一節，然後像一些元素。現在圖像高度也是250px。現在，如果你使用相對的話，這是相當困難的。現在，如果你仍然需要相同的高度配置，那麼你需要使用絕對的圖像，然後它會進入部分。 – Codelord

Id通常用於識別元素。造型通常是通過使用類來添加的。所以是的，這是令人不悅的。 – timo

@ user1129884，不需要向已有id的元素添加類。使用id來設計一個元素很好......我不明白你的意思...... – LinkinTED

我會建議把圖像浮到左邊。我更新了你的代碼位：

HTML：

<aside id="featPost"> 
    <article> 
     <h1> Featured Post </h1>  
     <section> 
      <figure> 
       <img src="http://placehold.it/250x250" width="250" height="250" alt="image of an egg" /> 
      </figure> 
      <h2> Essay as Easy as 1,2,3 </h2> 

      <p>What? There are rules in writing an essay?? <a href="writing_art1.html" title="Read more">Read more</a></p> 
     </section> 
    </article> 
</aside>

CSS：

#featPost { 
    padding:70px 0px 0px 51.2px; 
    /* background-color: orange;*/ 
} 
#featPost section { 
    width: 750px; 
    overflow: auto; 
    border: 4px double black; 
} 
#featPost figure { 
    float:left; 
} 
#featPost h1 { 
    font-family:"Calibri", Helvetica, sans-serif; 
} 
#featPost h2 { 
    margin-top: 50px; 
    font-size: 30px; 
    text-align: center; 
    font-family:"Calibri", Helvetica, sans-serif; 
} 

#featPost p { 
    font-size: 20px; 
}

DEMO

來源

2015-05-04 09:55:37 LinkinTED

這是完美:) –

正是我在找的東西，非常感謝你！如果你不介意，你能解釋我哪裏出錯了嗎？我確實使用了float：left。再次感謝 –

好吧，有不止一個'問題'。首先，圖像應該是'section'中的第一個元素。然後你將圖像浮到左邊。爲了保持'section'狀態良好（並且不會將圖像浮動），它需要'overflow：auto'。然後我改變了'h2'和'p'上的一些邊距和填充，使其看起來像你想要的。 – LinkinTED

H2和P標籤自動進行全寬這就是爲什麼你不能浮動圖像。

來源

2015-05-04 09:51:24

Css - 圖放置

回答

相關問題