1

我的网站有点问题。我有 3 个并排的三个盒子（box1、box2、box3）。Box1 中的文本将根据 date() 动态生成。

我遇到的问题是..box1 中的某些文本似乎将其他框上的框和图标向上推。

CSS

.box1{
margin-left: 0px;
margin-top: 60px;
width: 300px;
height: 200px;
background-color:#D8D8D8 ;  
position: relative; 

}

.box2{ 
 margin-left: 350px;
 margin-top: -200px;
  width: 300px;
height: 200px; 
background-color:#D8D8D8 ; 
}

.box3{
margin-left: 700px;
margin-top: -200px;
 width: 300px;
height: 200px;
background-color:#D8D8D8 ; 
}

.result{
        color :teal ;  
        font-family: cambria; 
        font-weight: normal; 
        text-align:center; 
        font-size:1.85em; 
         margin-top: 0px;   

}

.mic{
 position: absolute;
margin-left: 250px;
margin-top: -25px;
}

.clock{
 position: absolute;
margin-left: -460px;
margin-top: -25px;
}

.calendar{
position: absolute;
margin-left: 940px;
margin-top: -25px;
}

3 个示例如下图所示

4

2 回答 2

1

试试这个小曲子：

.prevent-text-breakouts {
  -ms-word-break: break-all;
      word-break: break-all;
      word-break: break-word;
  -webkit-hyphens: auto;
     -moz-hyphens: auto;
          hyphens: auto;
}

您还可以考虑在这些框上使用溢出属性。

于 2012-08-16T21:22:35.483 回答
1

  1. 找出发生错误时将什么“文本”添加到结果div 中。可能是以某种方式插入了格式错误的 HTML。

  2. 你可以使用float:left;来清理你的 CSS 。而不是根据过多的边距定位元素。如果你想让我详细说明，请告诉我。

看看这个小提琴：http: //jsfiddle.net/dEhEt/5/

它不包括每个框的图标，但有许多不同的方法可以实现这种效果，我会让你决定要使用哪一种。

于 2012-08-16T21:30:41.893 回答