CODEWITHSUNDEEP
htmlcss
Sssssuppp
Sssssuppp

Reputation: 711

Align images to left and right

Did not find any answer on SO. I want to list the images I get in the left and right. The images wont have a fixed size. I don't know if this is the right way to do it. My html file looks like this:

<div class="six">
        <ul><img class="left" src=""  width=250/></ul>
        <ul><img class="left" src=""  width=250/></ul>
        <ul><img class="left" src=""  width=250/></ul>

            <div align="center">
                <h1>Pictures</h1>
                <input type="text" id="gif">
                <button id="sbmt">Submit</button>
                <img src=""  width=250/>
            <div>

        <ul><img  class="right" src=""  width=250/></ul>
        <ul><img  class="right" src=""  width=250/></ul>
        <ul><img  class="right" src=""  width=250/></ul>
    </div>

My current css file looks like this:

.left{
    align-content: left;
    width:fit-content
  }

.right{
    align-content: right;
    width: fit-content;
}

The above code attempts to organize the images like below. But, clearly I am doing a mistake. I searched for like an hour and tried various "SO tricks". It just won't work.

The above code attempts to organize the images like below. But, clearly I am doing a mistake

Upvotes: 0

Views: 43

Answers (1)

somdev
somdev

Reputation: 186

I would go with flexbox on this one. You can use this and then insert your images inside each of the six divs:

.flex-body {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.flex-column {
    flex-direction: column;
    display: flex;
}

.flex-row {
    flex-direction: row;
    display: flex;
    align-items: center;
    text-align: center;
}

.flex-body div:not([class*="flex"]) {
    border: 1px solid white;
    flex: 1 1 200px;
    width: 500px;
}
<div class="flex-body">
  <div class="flex-column">
    <div style="background: #555;"><!-- Image here --></div>
    <div style="background: #555;"><!-- Image here --></div>
    <div style="background: #555;"><!-- Image here --></div>
  </div>
  <div class="flex-row">
    <div style="background: #fff;">
      <h1>Pictures</h1>
        <input type="text" id="gif">
        <button id="sbmt">Submit</button>
        <img src="" width="250px"/>
    </div>
  </div>
  <div class="flex-column">
    <div style="background: #555;"><!-- Image here --></div>
    <div style="background: #555;"><!-- Image here --></div>
    <div style="background: #555;"><!-- Image here --></div>
  </div>
</div>

Upvotes: 1

Related Questions