边框不包括图像

Question

任何人都可以帮我封边图像吗？

它只遵循文字。 如果我的文字较长，则使用文字

调整边框大小

这是我的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>

这是我的css

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

Answer 1

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

(Ubuntu 14.04)

Answer 2

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

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

#guitar:after {
    clear: both;
}