Issue
I am new to CSS and fiddling with grids, but I am having trouble finding a reasonable way to have a grid with two rows and two columns, where:
Upper left cell: button and TEXT starts Upper right cell: picture Lower left cell: TEXT continues Lower right cell: TEXT continues
.row {
display: grid;
grid-template-columns: 0.1fr 0.35fr 0.55fr;
grid-auto-flow: row;
grid-template-rows: auto;
.button {
text-align: center;
}
.text {
grid-column-start: 1;
grid-column: span 2 / span 2;
grid-row-start: 2;
}
.img {
float: right;
}<div class="row">
<div class="upper-right-cell">
<span class="button">Button</span><br /><span class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
</span>
</div>
<div class="upper-right-cell"><img src="https://www.w3schools.com/Css/pineapple.jpg">
</div>The text should be starting just under the BUTTON, where is is, but then when the image ends, the text should continue under the image into the second column.
I have lost the forest from the trees.
Solution
I achieved your goal without using grid. If you never mind removing grid, this snippet will help you. Otherwise just discard my answer.
<!DOCTYPE html>
<html>
<head>
<title>
Wrapping an Image with the text
</title>
<style>
/* This div design part is
used as an Image */
.upper-right-cell {
width: 400px;
height: 100px;
float: right;
}
</style>
</head>
<body>
<div class="upper-right-cell">
<img width="400" height="100" src="https://www.w3schools.com/Css/pineapple.jpg">
</div>
<div class="upper-left-cell">
<span class="button">Button</span><br /><span class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
</span>
</div>
</body>
</html>Reference : https://www.geeksforgeeks.org/how-to-wrap-the-text-around-an-image-using-html-and-css/
Answered By - userDuR
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.