3 floated divs in a fixed width container, div jumps down when the three are same size as fixed div woth border_问答_开发者

3 floated divs in a fixed width container, div jumps down when the three are same size as fixed div woth border

开发者 https://www.devze.com 2023-03-06 02:44 出处：网络

Messy headline, but i had no other way to descibe it. what im trying to do is i have 3 boex in a line with only 1 px border at each side, but cant get it to work, it is always 2 px at the far right o

Messy headline, but i had no other way to descibe it. what im trying to do is i have 3 boex in a line with only 1 px border at each side, but cant get it to work, it is always 2 px at the far right one. How to solve this?

Check the code:

#content {
  width: 1016px;
  min-height: 664px;
  height: auto;
  border: 1px solid #232323;
  background-color: #12100e;
  float: left;
  padding: 0px;
}

#imagebox {
  Width: 338px;
  height: 221px;
  padding-right: 0px;
  padding-left: 0px;
  border-right: 1px solid #232323;
  border-bottom: 1px solid #232323;
}

<html>
  <head>
    <link rel="StyleSheet" href="Main.css" type="text/css">
    <title></title>
  </head>
  <body>
    <div id="mainbody">
      <div id="menu"></div>
      <div id="content">
        <div id="imagebox"></div>
        <div id="imagebox"></div>
        <div id="imagebo开发者_StackOverflow中文版x"></div>
        <div id="imagebox"></div>
        <div id="imagebox"></div>
        <div id="imagebox"></div>
        <div id="imagebox"></div>
        <div id="imagebox"></div>
        <div id="imagebox"></div>
      </div>
    </div>
  </body>
</html>

It's because the right-hand border add's 1px to the overall width of the #imagebox element, thus making the width 339px.

Try decreasing the width to 337px and they should all fit in

Closest you can get:

http://jsfiddle.net/CGEWC/2/

Several thing you have to keep in mind:

Use classes in stead of id's if you need to assign a style multiple times.

In your CSS you use Width with a capital. Although CSS is not case sensitive it's cleaner to just write it all lowercase.

I've added a float: left; to your imageboxes

I've added first and last classes to your div. Not the cleanest code, but it should word.

Have you tried using max-width instead of width? It allows the object to be scaled down. If need be just take 1 away from either and it should be fine and change the id's to class as they are all the same.