'What is the best way to emulate a horizontal XAML StackPanel in HTML?

This is regarding converting a silverlight app to html. Some parts of converting a XAML gui to HTML are similar, but I miss the ease of use of a StackPanel where elements can be easily horizontally aligned. What the best way to do this in HTML?

Various ways I've looked at:

  • Using a table. Would be a lot clunkier to do this way.
  • CCS3 multi-column: Could work but also is not really like a stack panel.

I'm open for using modern browser capabilities (does not have to support old IE's).

htmlsilverlight


Solution 1:[1]

You could use a parent div and have all elements inside have float: left, this would effectively all line them up horizontally.

Solution 2:[2]

You can use css flexbox.

.flex-container {
  display: flex;
  background-color: blue;
  height: 30px;
  flex-direction: row;
}

.flex-item {
  background-color: red;
  width: 50px;
  border: 1px solid black;
}
<div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kenneth
Solution 2 Egemen Çiftci

Related Questions