圖像和文本在一個容器中

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>

在此處輸入圖片說明

圖像和文本在一個容器中

問題描述

2 個解決方案

解決方案1
0 2012-02-16 15:32:34

解決方案2
0 2012-03-03 09:50:01

圖像和文本在一個容器中

問題描述

2 個解決方案

解決方案1 0 2012-02-16 15:32:34

解決方案2 0 2012-03-03 09:50:01

解決方案1
0 2012-02-16 15:32:34

解決方案2
0 2012-03-03 09:50:01