1

I'm having a little problem with my website. I have 3 three boxes side by side(box1, box2, box3). The text in Box1 will be generated dynamically according to the date().

The problem I'm having is that..some text in box1 seems to be pushing the boxes and icons on the other boxes upwards.

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;
}

The 3 examples are in the image below

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. エラーが発生したときにResult div に追加されている「テキスト」を見つけます。不正な HTML が挿入されている可能性があります。

  2. float:left;を使用すると、CSS を大幅にクリーンアップできます。過剰なマージンに基づいて要素を配置する代わりに。詳しく説明してほしい場合は、お知らせください。

このフィドルを見てください：http://jsfiddle.net/dEhEt/5/

各ボックスのアイコンは含まれていませんが、その効果を得るにはさまざまな方法があります。どの方法を使用するかはお任せします。

于 2012-08-16T21:30:41.893 に答える