Tengo un div con 2 divs diferentes. Cada uno de estos 3 tiene una imagen en (60%) del ancho y algo de texto en ellos (40%), sin embargo, no se alinea en absoluto. El texto está en el lugar correcto y las imágenes están en la organización correcta, pero están demasiado abajo en la página. Soy nuevo en CSS y no sé cómo solucionarlo

Aquí hay una foto de cómo se ve

enter image description here

Html:

<div class="section 1">
  <p id="section1text">
    <b>ME</b><br>Hello! My name is Max Jordan. I am a student living in the UK currently doing A-Levels in Maths, Engineering, Physics and computer science. I then want to do a degree in computer science and work as a Software Engineer/Developer. I currently live in Nottingham in the UK. I love programming and creating elegant soloutions for problems.
  </p>
  <img src="section1.jpg" id="section1pic">
</div>

<div class="section 2">
  <p id="section2text">
    <b>WORK</b><br> 
  </p>
  <img src="section2.jpg" id="section2pic">

</div>

<div class="section 3">
  <p id="section3text">
  </p>
  <img src="section3.jpg" id="section3pic">

</div>

Css:

.aboutSection{
  width: 100%;
  height:100%;
}

.section{
  text-align: center;
  display: inline-block;
  width: 90%;
  height: 20%;
  margin-left: 5%;
}

#section1text{
  float: left;
  display: inline-block;
  height: 100%;
  width:40%;
  background-color: #3399ff;
  color: white;
  font-size: 20;
  padding: 10px;

}
#section2text{
  float: right;
  height: 100%;
  width:40%;
  float: right;
  background-color: #3399ff;
  color: white;
  font-size: 20;
  display: inline-block;
  padding: 10px;
}
#section3text{
  float: left;
  height: 100%;
  width:40%;
  background-color: #3399ff;
  color: white;
  font-size: 20;
  display: inline-block;
  padding: 10px;
}

#section1pic{
  float: right;
  position:relative;
  display: inline-block;
  height: 100%;
  width: 60%;
}
#section2pic{
  float: left;
  position:relative;
  display: inline-block;
  height: 100%;
  width: 60%;
}
#section3pic{
  float: right;
  position:relative;
  display: inline-block;
  height: 100%;
  width: 60%;
}

Sé que el CSS es muy malo, pero solo estoy tratando de que funcione.

0
mexO 23 dic. 2016 a las 22:04

3 respuestas

La mejor respuesta

En lugar de jugar con flotadores y posicionamiento. Supongo que mostrar: flex es una buena opción para tales diseños

Mira este fragmento

.imgContainer {
  display: flex;
  flex-wrap: wrap;
}
.section {
  display: flex;
  border: 1px solid;
}
#section1text {
  border: 1px solid;
  width: 40%;
  background-color: #3399ff;
  border-right: 1px solid red;
  px solid;
}
.div1 img {
  width: 60%;
  height: 100%;
}
.div2 img {
  width: 60%;
  height: 100%;
  border-right: 1px solid red;
  padding: 10px;
}
.div3 img {
  width: 60%;
  height: 100%;
}
#section2text {
  width: 40%;
  background-color: #3399ff;
  color: white;
  font-size: 20;
  padding: 10px;
}
#section3text {
  background-color: #3399ff;
  color: white;
  width: 60%;
}
<div class="imgContainer">
  <div class="section div1">
    <p id="section1text">
      <b>ME</b>
      <br>Hello! My name is Max Jordan. I am a student living in the UK currently doing A-Levels in Maths, Engineering, Physics and computer science. I then want to do a degree in computer science and work as a Software Engineer/Developer. I currently live
      in Nottingham in the UK. I love programming and creating elegant soloutions for problems.
    </p>
    <img src="https://exoticcars.enterprise.com/etc/designs/exotics/clientlibs/dist/img/homepage/Homepage-Hero-Car.png" id="section1pic">
  </div>

  <div class="section div2">
    <img src="https://exoticcars.enterprise.com/etc/designs/exotics/clientlibs/dist/img/homepage/Homepage-Hero-Car.png" id="section2pic">
    <p id="section2text">
      <b>WORK</b>
      <br>
    </p>


  </div>

  <div class="section div3">
    <p id="section3text">
      skfshfk
    </p>
    <img src="https://exoticcars.enterprise.com/etc/designs/exotics/clientlibs/dist/img/homepage/Homepage-Hero-Car.png" id="section3pic">

  </div>
</div>

Traté de crear un diseño de muestra de su requerimiento

Espero que ayude

1
Geeky 23 dic. 2016 a las 19:29

Debe comenzar por eliminar:

padding: 10px;

O al menos cámbielo a:

padding: 10px 0;

Esto debe eliminarse de #section1text, #section2text y #section3text. El relleno hace que las secciones de texto sean más anchas que el 40%, lo que no deja el 60% de ancho para las imágenes.

2
hopkins-matt 23 dic. 2016 a las 19:13
.aboutSection{
  width: 100%;
  height:100%;
  position:relative;
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
}

.section{
position:relative;
display:flex;
flex-direction:row;
width:90%;
overflow:hidden;
}

.aboutSection .section:nth-child(odd){
flex-direction:row-reverse;}

.section p{
width:40%;
margin:0;
padding:2px;
}

.section img{
flex:0;
width:auto;
min-height:100%;
}
<div class="aboutSection">
<div class="section">
  <p>
    <b>ME</b><br>Hello! My name is Max Jordan. I am a student living in the UK currently doing A-Levels in Maths, Engineering, Physics and computer science. I then want to do a degree in computer science and work as a Software Engineer/Developer. I currently live in Nottingham in the UK. I love programming and creating elegant soloutions for problems.
  </p>
  <img src="http://www.markgray.com.au/images/gallery/large/desert-light.jpg">
</div>

<div class="section">
  <p>
    <b>WORK</b><br> 
  </p>
  <img src="http://www.markgray.com.au/images/gallery/large/desert-light.jpg">
</div>

<div class="section">
  <p>
  </p>
  <img src="http://www.markgray.com.au/images/gallery/large/desert-light.jpg">
</div>
</div>

Sé que trabajas muy duro, pero creo que necesitas leer más sobre CSS y seguir practicando. No necesita ninguna identificación en esta cosa. Y en realidad no entiendo qué es lo que querías. Tal vez algo como esto?

1
Obink 23 dic. 2016 a las 20:53