Question

我正在尝试将图像与一些文本一起添加，并希望它们在同一背景中。

意思是我有一个容器，我把图像和文本放在一起。并希望能够引导我想要的文本。这似乎很容易，但我无法使其发挥作用，并想知道是否有其他人知道如何完成这项工作。

这里有我放在一起的html和css，随时可以更改它。

div.imagecaption{float: left;
             width: 302px;
             margin: 0 1em 1em 1em;
             display: inline;
             padding:
             background: #036;
             color: #fff;
             }

div.imagecaption img{float: left;
                 margin-left: 1em;
                 border: 1px solid #fff;}

<div class="imagecaption">
<img src>
</div>

<p>
TEXTTEXTTEXTTEXTTEXTTEXT</br>
TEXTTEXTTEXTTEXTTEXTTEXT</br>
TEXTTEXTTEXTTEXTTEXTTEXT</br>
</p>

我还希望文本部分具有自己的背景颜色。现在我真的尝试过这项工作，这是我最近的尝试。那么，有谁知道我做错了什么？

Answer 1

我不知道你想要什么，试试这个：

<style>
    div.imagecaption{
        float: left;
     width: 302px;
     margin: 0 1em 1em 1em;
     display:block;
     padding:2px;
     background: #036;
     color: #fff;
  }

div.imagecaption img{
    float: left;
    border: 1px solid #fff;
}
div.imagecaption p {
    float: right;
    margin-right: 8px;
    width: 180px;
    word-wrap: break-word;
}
</style>
<div class="imagecaption">
    <img src="images/logo_ws2011.png">
    <p>
        TEXTTEXTTEXTTEXTTEXTTEXT</br>
        TEXTTEXTTEXTTEXTTEXTTEXT</br>
        TEXTTEXTTEXTTEXTTEXTTEXT</br>
    </p>
</div>

Answer 2

试试这个，它是我在工作中使用的代码的一部分

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
 .mybutton a
{
    display:block;
    line-height:60%;
    text-decoration:none;
    border:0px solid;
    font:Verdana, Geneva, sans-serif;
    font-weight:bold;
    font-size:12px;
    float:left;
    background-color:#f5f5f5;
    cursor:pointer;
    color:#000;
    border:1px solid #dedede;
    border-top:1px solid #eee;
    border-left:1px solid #eee;
}

.mybutton a img
{
    width:45px;
    height:45px;
    margin:5px 0px 5px 0 ;
    padding:0px 15px 0px 15px;
    border:none;
}
.mybutton a span
{
    position:relative;
    bottom:3px;
    margin:5px 0px 0px 0px;
    padding-left:10px;
}
.mybutton a.myimg{
    color:#000;
}
.mybutton a.myimg:hover
{
    background-color:#E6EFC2;
    border:1px solid #C6D880;
    color:#529214;
}
.mybutton a.myimg:active{
    background-color:#529214;
    border:1px solid #529214;
    color:#fff;
}
</style>
</head>
<body>

    <div class="mybutton">
        <a href="#" class="myimg">
            <img src="card.jpg" alt=""  align="top"/><br/>
        <span style="padding-left:10px;" >My Button</span>
      </a>
</div>
</body>
</html>

enter image description here

图像和文本在一个容器中

2 个答案: