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 - 图放置

回答

相关问题