Question

我知道这可能很容易解决，但我无法做到正确。如何让蓝色部分成为图像（因此右侧不是蓝色块），然后是蓝色部分旁边的红色部分？（同样适用于绿色和黄色，但他们现在很好）。

＆＃13;

#div1 {
	float: left;
	background: blue;
	margin-top: 100px;
}

#div2 {
	float: left;
	width: 50%;
	height: 100px;
	background: red;
	margin-top: 100px;
}

.div-container {
	clear: both;
	overflow: hidden;
}

#div3 {
	float: left;
	width: 50%;
	background: yellow;
	height: 100px;
}

#div4 {
	float: left;
	width: 50%;
	height: 100px;
	background: green;
}

＆＃13;

<body>
	<div class="div-container">
		<div id="div1"><img src="img/Kenya elephants.jpg" alt="TravelPic" width="50%" height="50%"></div>
		<div id="div2"></div>
	</div>
	
	<div class="div-container">
		<div id="div3"></div>
		<div id="div4"></div>
	</div>
 </body>

＆＃13;

Example of what it looks like on a "phone" screensize

Answer 1

解决方案： -

<style>
#div1 {
    float: left;
    background: blue;
    margin-top: 100px;
    height : 100px;
    width : 20% ;
}
#div2 {
    float: left;
    width: 20%;
    height: 100px;
    background: red;
    margin-top: 100px;
}
#div3 {
    float: left;
    width: 20%;
    background: yellow;
    height: 100px;
margin-top : 100px;
}
#div4 {
    float: left;
    width: 20%;
    height: 100px;
    margin-top : 100px ;
    background: green;
}
</style>
<body>
    <div class="div-container">
        <div id="div1"><img src="img/Kenya elephants.jpg" alt="TravelPic" width="100%" height="100%"></div>
        <div id="div2"></div>
    </div>
    <div class="div-container">
        <div id="div3"></div>
        <div id="div4"></div>
    </div>
 </body>

解释： -

I Had Made Some Changes With Your Code , Maybe you can take a look at them
and if they don't fit you , you can try their equivalents....
According to what I understood >>
I created a code for you , basically its your own code with a few changes 
I didn't exactly get what you wanted but , this is what I think you
want....

注释和参考文献： -

NOTE :: I changed some of the sizes (like the image tag)
and moreover I changed a few CSS style lines from your code and added my own
Hope it is what you are wanting...

如何在正确的位置找到彼此相邻的部分

1 个答案: