边界不覆盖图像[复制]

This question already has an answer here:

这个问题已经有了答案:

What methods of ‘clearfix’ can I use? 28 answers
我可以用什么方法来“清理”?28日答案

Can anyone help me to bordered cover the image?

有人能帮我把这幅画涂上边框吗?

It only follow the text. If my text is longer, then the border is resize with the text

它只遵循文本。如果我的文本更长，则边框与文本调整大小。

Here my is html code

这里是html代码。

<div id = "guitar">

            <img src="christmas.jpg" alt="guitar"  width="500" height="300" class="imgleft"> </img>


                    <h1>Guitar</h1>

                    Visit the three ghosts of Christmas this November as the PLAYHOUSE Whitley Bay kicks off the festive season with a fantastic Disney-esque musical production of A Christmas Carol.


        </div>

Here is my css

这是我的css

#guitar { border : 5px solid;
      padding : 10px;
      margin-bottom : 2%;
     }
.imgleft{float:left;}

2 个解决方案

#1

You need to clear floated image. The simples way to do it is by applying overflow rule to container:

你需要清除浮动图像。简单的方法是将溢出规则应用于容器:

#guitar {
  border : 5px solid;
  padding : 10px;
  margin-bottom : 2%;
  overflow: auto; /* <--- this rule does the trick */
}

#2

Instead of using overflow property, try clearing the float of the :after of #guitar because overflow sometimes adds excess space in your box.

不要使用溢出属性，请尝试清除:#guitar之后的浮动，因为溢出有时会在您的框中增加多余的空间。

#guitar:before, #guitar:after {
    content: '';
    display: table;
}

#guitar:after {
    clear: both;
}

#1