Using CSS to float forms and images-CodePudding

I currently have a dropdown box that when the user selects one of the eight images, it displays on the webpage. However, just now the image goes directly above the dropbox and I would like it so the image is displayed on the left and the dropbox on the right. I am just not sure how to code the css as the two are connected so I don't know if div classes would work.

Here's the code:

<img id="imageToSwap" src="kittens1.jpg"/>

<select id="kittenlist" onChange="swapImage()">
<option value="kittens1.jpg">Image 1</option>
<option value="kittens2.jpg">Image 2</option>
<option value="kittens3.jpg">Image 3</option>
<option value="kittens4.jpg">Image 4</option>
<option value="kittens5.jpg">Image 5</option>
<option value="kittens6.jpg">Image 6</option>
<option value="kittens7.jpg">Image 7</option>
<option value="kittens8.jpg">Image 8</option>
</select>
<script type="text/javascript">
function swapImage(){
    var image = document.getElementById("imageToSwap");
    var dropd = document.getElementById("kittenlist");
    image.src = dropd.value;    
};
</script>

CodePudding user response：

Both img and select are inline elements, so there is no line break between them. As long as there is room on the current row of the inline content, they will go next to each other by default. And, if there isn't enough room for both to fit next to each other, you can wrap both within a single element that has style="white-space: nowrap;" applied to it.

Also, don't use inline event attributes. That is a 25 year old technique that we used before there were standards. Use .addEventListener() in your JavaScript to set up event handlers.

const img = document.getElementById("imageToSwap");

// Set up a change event handler for the dropdown list
document.getElementById("kittenlist").addEventListener("change", function(){
  img.src = this.value;  // Change the image source to the dropdown value
  img.alt = this.value   // Don't forget the required alt attribute!
});

.noBreak {white-space: nowrap;}
#imageToSwap { width:200px; border:1px solid grey; }

<span >
  <img id="imageToSwap" src="https://images.unsplash.com/photo-1600357077527-930ccbaf7773?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1736&q=80">

  <select id="kittenlist">
    <option value="kittens1.jpg">Image 1</option>
    <option value="kittens2.jpg">Image 2</option>
    <option value="kittens3.jpg">Image 3</option>
    <option value="kittens4.jpg">Image 4</option>
    <option value="kittens5.jpg">Image 5</option>
    <option value="kittens6.jpg">Image 6</option>
    <option value="kittens7.jpg">Image 7</option>
    <option value="kittens8.jpg">Image 8</option>
  </select>
</span>

CodePudding user response：

I think if you use flexbox you can solve your problem quick and easy. Just create a .container wrapping the <img /> and <select> tags and thats it. Even if you want to change the position you can set the attribute flex-flow to row-reverse wrap and it will display the elements reversed. Let you an example.

function swapImage(){
    var image = document.getElementById("imageToSwap");
    var dropd = document.getElementById("kittenlist");
    image.src = dropd.value;    
}

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-item: flex-start;
  gap: 30px;
}

<div >  
    <div >
        <img id="imageToSwap" src="https://via.placeholder.com/150" />
    </div>

    <div >
        <select id="kittenlist" onChange="swapImage()">
            <option value="https://via.placeholder.com/150">Image 1</option>
            <option value="https://via.placeholder.com/175">Image 2</option>
            <option value="https://via.placeholder.com/200">Image 3</option>
            <option value="https://via.placeholder.com/225">Image 4</option>
            <option value="https://via.placeholder.com/250">Image 5</option>
            <option value="https://via.placeholder.com/275">Image 6</option>
            <option value="https://via.placeholder.com/300">Image 7</option>
            <option value="https://via.placeholder.com/325">Image 8</option>
        </select>
    </div>
</div>

CodePudding user response：

You can use divs. Have 2 divs, 1 for the dropdown and 1 for the image. You can then use css to arrange them horizontally next to each other. You can use this link for reference. How can I horizontally align my divs?