html - How can I accomplish this layout using proper markup and CSS? -
I should have a block on the left and a box that contains text on its right, but I do not want to Below are hidden to drop, it should be with the boundaries of a rectangle that are around the block. How does this happen that a table behaves, but I'm not sure what is the best way out of it.
I hope this Bella will be clear:
& lt; Div class = "container" & gt; & Lt; Div class = "block" & gt; Block & lt; / Div & gt; & Lt; Div class = "text" & gt; This is a text box that wraps at least two lines & lt; / Div & gt; & Lt; / Div & gt; Instead of floating, you display: table-cell :
* {box-size: border-box; }. Container {width: 200px; Limit: 1px solid black; Overflow: Auto; } .block {display: table-cell; Width: 70px; Height: 20px; Background: Red; White color; Text align: center; } .text {border: 1px solid red; Exhibit: Table Cell; }
Comments
Post a Comment