Question

我想要一个绿色的背景div。照片应该在左上角，文字应该环绕它（而不是在它上面）。应在右下角的末尾显示不同的div。目前我有：

<html>
    <head>
    <style>
           .UseA
           {
             display:block;
             text-indent:70px;
             border-radius: 10px;
             background: url('paper.gif') left top no-repeat #BADA55;
             /*background: url('paper.gif') left top no-repeat #BADA55;*/
             /*background: #BADA55;*/
             min-height:50px;
             width:300px;        
           }

           .UseA .dta
           {
             display:block;
             text-indent:15px;
             border-radius: 10px;
             width:130px;
             background-color:grey;
             color:white;
             position:relative; /*Relative to normal position*/
             left:150px; /*Move away from left*/
             top:3px;
           }
    </style>
    </head>
  <body>    




        <div class="UseA">
                Hello , My name is Jim ..
                         <div class="dta">something here</div>
        </div>

  </body>
 </html>

此代码不支持长文本。如果文本很长（观察picB），它会在图像上写入，而不是在图像周围，并将灰色div按下。我希望灰色div总是位于右下角的主绿色div中。这些是屏幕截图

enter image description here

图像A是所需的图像，但长文本在图像上运行而不是在它周围，灰色框向下滑动。

有关解决此问题的任何建议吗？

Answer 1

使用填充。不是文字缩进

http://jsfiddle.net/AWXEx/

.UseA
       {
         display:block;
         padding-left:70px;
         border-radius: 10px;
         background: url('paper.gif') left top no-repeat #BADA55;
         /*background: url('paper.gif') left top no-repeat #BADA55;*/
         /*background: #BADA55;*/
         min-height:50px;
         width:230px;        
       }

       .UseA .dta
       {
         display:block;
        text-align: center;
         padding:1px 15px;
         border-radius: 10px;
         width:130px;
         background-color:grey;
         color:white;
         position:relative; /*Relative to normal position*/
         left:50px; /*Move away from left*/
         top:3px;
       }

Answer 2

不需要position: relative。在您的情况下，您可以使用margin和padding来相应地调整元素。当您将上部文字换成额外的div时，您可以更自由地仅使用margin来调整下部文字

HTML

<div class="UseA">
    <div class="msg">Hello , My name is Jim. What is yours?
        What if this is a long text? And what if it gets even longer?</div>
    <div class="dta">something here</div>
</div>

CSS

.UseA {
    font-size: 14px;
    padding-bottom: 10px;
}
.UseA .msg {
    margin-left: 70px;
    margin-bottom: 10px;
}
.UseA .dta {
    margin-left: 150px;
}

查看完整的JSFiddle

Answer 3

这个css属性构成了魔力

- white-space：nowrap;
- 溢出：隐藏;
- 文本溢出：省略号;

将其添加到 .UseA 类

对齐问题 - 嵌套Div-图像

3 个答案: