Divide the screen into three parts with the image and move each screen from the link to a different screen.

As you can see in the title, vertical works well, but horizontal doesn't work (horizontal sticks out from the screen).
Is there any good way to display it?
Please let me know if you know anything about it.

#img{
        width: 100%;
        height: 33%;
	}

    # img2{
        width: 100%;
        height: 34%;
	}
    
    #img3{
        width: 100%;
        height: 33%;
	}

<divid="img">
        <a href="index.html"><img src="img/image_home_01.jpg">/a>
    </div>
    <divid="img2">
        <a href="index.html"><img src="img/image_home_02.jpg">/a>
    </div>
    <divid="img3">
        <a href="index.html"><img src="img/image_home_03.jpg">/a>
    </div>

html5 monaca

2022-09-30 20:30

2 Answers

Below is a sample of three longitudinal divisions (substantially divided into five parts).

body{
    margin:0;
    padding:0;
}
US>.screen{
    display:flex;
    flex-direction:column;
    position:absolute;
    height —100%;
    width: 100%;
    overflow — hidden;
}
.tabbar, .middle, .upper, .lower, .toolbar {
    width: 100%;
    overflow-y:scroll;
    overflow-x — hidden;
}
.toolbar, .tabbar {
    height —24px;
    background-color:cyan;
    overflow-y — hidden;
}
.upper{
    flex:1;
    background-color:pink;
}
.middle{
    flex:1;
    background-color:lightgray;
}
.lower{
    flex:1;
    background-color:lightblue;
}

<div class="screen">
<div class="tabbar">tabbar</div>
<div class="upper">
    <img width="100%" src="http://www.google.com/intl/en_com/images/srpr/logo3w.png"/>br/>
    <p>1
        <br of > 1
        <br of > 1
        <br of > 1
        <br of > 1
        <br/>1</p>
</div>
<div class="middle">
    <img width="100%" src="http://www.google.com/intl/en_com/images/srpr/logo3w.png"/>
    <p>2
        <br of > 2
        <br of > 2
        <br of > 2
        <br of > 2
        <br of > 2
        <br of > 2
        <br/>2</p>
</div>
<div class="lower">
    <img width="100%" src="http://www.google.com/intl/en_com/images/srpr/logo3w.png"/>
    <p>3
        <br of > 3
        <br of > 3
        <br of > 3
        <br of > 3
        <br of > 3
        <br/>3</p>
    </div>
<div class="toolbar">toolbar</div>
</div>

(The following are old ways.)

.middle, .upper, .lower{
    width: 100%;
    position:absolute;
    left:0;
    right:0;
    overflow-y:scroll;
    overflow-x — hidden;
}
.upper{
    top:0;
    height: 33%;
    background-color:pink;
}
.middle{
    top: 33%;
    height: 34%;
    background-color:lightgray;
}
.lower{
    bottom:0;
    height: 33%;
    background-color:lightblue;
}

<div class="vsplits">
<div class="upper">
    <img width="100%" src="http://www.google.com/intl/en_com/images/srpr/logo3w.png"/>
    <p>1
    <br of > 1
    <br of > 1
    <br of > 1
    <br of > 1
    <br of > 1
    <br of > 1
    <br of > 1
    <br of > 1
    <br of > 1
    <br of > 1
    <br of > 1
    <br of > 1
    <br of > 1
    <br of > 1
    <br of > 1
    <br of > 1
    <br of > 1
    <br of > 1
    <br of > 1
    <br of > 1
    <br/>1</p>
</div>
<div class="middle">
    <img width="100%" src="http://www.google.com/intl/en_com/images/srpr/logo3w.png"/>
    <p>2
    <br of > 2
    <br of > 2
    <br of > 2
    <br of > 2
    <br of > 2
    <br of > 2
    <br of > 2
    <br of > 2
    <br of > 2
    <br of > 2
    <br of > 2
    <br of > 2
    <br of > 2
    <br of > 2
    <br of > 2
    <br of > 2
    <br of > 2
    <br of > 2
    <br of > 2
    <br of > 2
    <br/>2</p>
</div>
<div class="lower">
    <img width="100%" src="http://www.google.com/intl/en_com/images/srpr/logo3w.png"/>
    <p>3
    <br of > 3
    <br of > 3
    <br of > 3
    <br of > 3
    <br of > 3
    <br of > 3
    <br of > 3
    <br of > 3
    <br of > 3
    <br of > 3
    <br of > 3
    <br of > 3
    <br of > 3
    <br of > 3
    <br of > 3
    <br of > 3
    <br of > 3
    <br of > 3
    <br of > 3
    <br of > 3
    <br/>3</p>
</div>
</div>

2022-09-30 20:30

#img{
    width: 100%;
    height: 33%;
}

# img img {
    width: 100%;
}

# img2{
    width: 100%;
    height: 34%;
}

# img2 img{
    width: 100%;
}

#img3{
    width: 100%;
    height: 33%;
}

# img3 img{
    width: 100%;
}

I think this will cure it.
The width value is not specified in the img element, so 100% of div is ignored and displayed as px as it is.
If you add the div element as the parent element, you can reduce the CSS more beautifully.
I am sorry if it is different from the result I am looking for.

2022-09-30 20:30

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656