Question 259070 in CSS Question posted in
Some basic documentation can be found here.

CSS – list of 4 items and an image to display in a div in different positions

I would like a list of four items, and an image, to display within a div element; I need the first item on the list to sit beneath the image, and the next three items to sit to the right of the image.

The four items must be in the same list, and the image cannot be part of this list. I have tried various ways but cannot get this to work as I’d like.

Can anyone help with this please?

.list-container .list:first-child {
  /* display: flex; */
  flex-direction: column;
  color: green;
  /* flex-direction: row | row-reverse | column | column-reverse; */
}

.list-container .list li:not(:first-child) {
  display: flex;
  color: red;
  align-items: flex-start;
}

.image {
  max-width: 50%;
  height: auto;
  float: left;
}

.list-container {
  flex-grow: 1;
  padding-left: 10px;
}

.list {
  list-style-type: none;
  padding: 0;
}

.list-item {
  margin-bottom: 50px;
}
<div class="container">
  <div class="">
    <img src="https://www.w3schools.com/html/workplace.jpg" alt="Image" class="image" />
    <div class="list-container">
      <ul class="list">
        <li class="list-item">List Item 1</li>
        <li class="list-item">List Item 2</li>
        <li class="list-item">List Item 3</li>
        <li class="list-item">List Item 4</li>
      </ul>
    </div>
  </div>
</div>
Tags:

2

Answers


  1. 0

    Try display grid.

    .container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 1fr);
}

.img-container {
grid-column: 1;
grid-row: 1 / 3;
overflow: hidden;
}


.list {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column: 1 / 3;
grid-row: 1 / 4;
}

.list::before {
content: '';
grid-column: 1;
grid-row: 1 / 3
}
    <div class="container">
      <div class="img-container">
        <img
          src="https://www.w3schools.com/html/workplace.jpg"
          alt="Image"
          class="image"
        />
        </div>

          <ul class="list">
            <li class="list-item">List Item 1</li>
            <li class="list-item">List Item 2</li>
            <li class="list-item">List Item 3</li>
            <li class="list-item">List Item 4</li>
          </ul>

    </div>

    Main point is to create same grid space for both elements inside the container. Positions of the list items can be changed with ‘nth-child’

    Login or Signup to reply.
  2. 0

    You may try to code 2 columns instead!
    Below code gets this output: enter image description here

    <style>
      .list {
        list-style-type: none;
        padding: 0;
      }
      .item1{
      background-color: pink;
      float: left; 
      }
      .image{
      max-width: 50%;}
      
      .column{
      width: 50%;
      float: left;
      }
      .row{
      display: flex;
      }
      .row:after {
        content: "";
        display: table;
        clear: both;
}
</style>
    <div class="container">
      <div class="row">
          <div class="column"> 
                 <img src="https://www.w3schools.com/html/workplace.jpg"  alt="Image" class="image"> <br> 
          <ul class="list" >
          <li class="item1"> Item 1 </li> 
          </ul>
          </div> 
                   
          <div class="column">
          <ul class="list">
          <li> Item 2 </li>
          <li>Item 3 </li>
          <li> Item 4 </li> 
          </ul> 
          </div>       
        </div>
      </div>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search