开发者

Weird bug in my CSS code making the text randomly get a huge "margin"

开发者 https://www.devze.com 2023-02-01 12:43 出处:网络
I don\'t know why this is happening. I have this code here. It works fine but \"sometimes\" (and many times in a row) for no apparent reason, this happens:

I don't know why this is happening.

I have this code here.

It works fine but "sometimes" (and many times in a row) for no apparent reason, this happens:

Weird bug in my CSS code making the text randomly get a huge "margin"

To all the .box class.

Sorry I have to share "all" my code but I have no idea why this is.

This is what it should look like:

Weird bug in my CSS code making the text randomly get a huge "margin"

I don't know if this is usual but id you want, you can download the two files from here (HTML and CSS + Images) because in jsfiddle seems to work all of the times,

I don't know whether it matters or not but I'm using chrome (latest) on a mac.

EDIT: I seems to work fine in safari every time.

Thanks in advance!! Please ask for any clarification needed!


By the way my title is absolutely horrible, sorry! but I have no 开发者_如何学Pythonidea what the problem is so I can't really describe it, feel free to edit or comment any suggestion.


On your style.css

  1. Remove overflow:hidden on #container
  2. Set overflow:hidden to the .box
  3. Set float:left to the .box img
  4. Set float:right to the .follow

new

#container {
    height:100%;
    width:520px;
    position:relative;
    left:50%;
    margin:20px 0 0 -250px;
}
.box {
    border:1px solid gray;
    height:200px;
    width:500px;
    float:left;
    margin:0px 0 20px 10px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    overflow:hidden;
}
.box img {
    width:140px;
    height:140px;
    margin: 15px 0 0 15px;
    float:left;
}
.follow {
    /*outline:1px solid red;*/
    height:80px;
    width:260px;
    float:right;
    margin:25px 30px 0 0;
}


To make your css cleaner, when you state styles for .box:hover, you don't need to redeclare things that already apply to .box. All .box styles are inherited by .box:hover . (Example, how you have float:left on both).

That being said, this is almost certainly a float issue. Adjust both the float and clear properties of the two inner divs, the outer div, and the img to see if you learn anything from that. It's difficult to give help when the problem doesn't occur in the fiddle.

0

精彩评论

暂无评论...
验证码 换一张
取 消