混淆为什么这些图片和文字没有排队

我有一个有2个不同div的div。这三个图片中的每一个都有一个宽度为60％的图片和一些文字（40％），但是它根本没有排列。文本位于正确的位置，图片位于正确的组织中，但它们距页面太远。我新望对CSS，我不知道如何解决这个混淆为什么这些图片和文字没有排队

这里是什么样子

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

我知道CSS是非常糟糕的，但我只是想让它工作。

来源

2016-12-23 mexO

你可以简单介绍一下它的外观吗 – Geeky

https://gyazo.com/22b24142b2d557e9fe2bdd4e9ee17b9f – mexO

而不是摆弄浮动和定位。我猜显示：flex是这样布局的一个不错的选择

检查这个片段

.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>

我试图创建的您的要求的样品布局

希望它可以帮助

来源

2016-12-23 19:29:03 Geeky

您需要先从消除：

padding: 10px;

，或者至少将其更改为：

padding: 10px 0;

这应该从#section1text，#section2text和#section3text被删除。填充使您的文本部分宽于40％，这不会为图像留下60％的宽度。

来源

2016-12-23 19:13:22

对，也许只是将宽度调整到较小的值。 – Vcasso

我做到了这一点，它仍然有点关闭，谢谢你的答案！ – mexO

https://gyazo.com/2484d713ff0fe6ddf863ded4cfbc110e – mexO

.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>

我知道你的工作非常努力，但我认为你需要阅读更多关于css的知识并保持练习。这件事你不需要任何身份证件。而实际上我不明白你想要什么。也许这样？

来源

2016-12-23 20:53:14 Obink

混淆为什么这些图片和文字没有排队

回答

相关问题