3 divs flotantes en un contenedor de ancho fijo, div salta hacia abajo cuando los tres tienen el mismo tamaño que el div fijo con borde

Titular desordenado, pero no tenía otra forma de describirlo. Lo que estoy tratando de hacer es que tengo 3 boex en una línea con solo un borde de 1 px en cada lado, pero no puedo hacer que funcione, siempre es de 2 px en el extremo derecho. ¿Cómo solucionar esto?

Verifique el código:

#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="imagebox"></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>

preguntado el 16 de mayo de 11 a las 18:05

Si la línea #imagebox son las tres clases de uso divs en lugar de id. ¡Debe ser único! -

Editado con html, compruébalo, doble borde derecho -

@OP: ¿Dónde tienes la doble frontera? ¿En el contenido div? Los bordes se colocan fuera de los elementos. -

3 Respuestas

Es porque el borde de la derecha agrega 1px al ancho total del elemento #imagebox, lo que hace que el ancho sea de 339px.

Intente disminuir el ancho a 337px y ellos debemos todo encaja

contestado el 16 de mayo de 11 a las 22:05

fin1te tiene razón: jsfiddle.net/CGEWC. También mira mi comentario sobre clases vs id's - PeeHaa

las matemáticas son difíciles (338 + 1) * 3 = 1017 - Pete Amundson

Bueno, si el ancho total DEBE ser 1016 simplemente no es posible. 1016/3 = 338.666666666666666666666 - PeeHaa

No son las matemáticas el problema, obtengo DOBLE FRONTERA en la correcta - palanqueta

Habría hecho el cuadro central 2px más ancho si fuera posible en su diseño - PeeHaa

Lo más cercano que puede obtener:

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

Varias cosas que debes tener en cuenta:

Use clases en lugar de identificaciones si necesita asignar un estilo varias veces.

En su CSS, usa Width con mayúscula. Aunque CSS no distingue entre mayúsculas y minúsculas, es más limpio escribirlo todo en minúsculas.

He agregado un float: left; a tus cajas de imágenes

Agregué la primera y la última clase a su div. No es el código más limpio, pero debería ser una palabra.

contestado el 16 de mayo de 11 a las 23:05

¿Has probado usar max-width en lugar de width? Permite reducir la escala del objeto. Si es necesario, simplemente quite 1 de cualquiera de los dos y debería estar bien y cambie las identificaciones a class, ya que son todas iguales.

Respondido el 04 de diciembre de 13 a las 08:12

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.