logo
Tags down

shadow

css new line after element


By : sseh
Date : May 06 2020, 07:51 AM

I'm look for a html/css how to fix  some html element:

  • It must force a new-line after it, that is, no other element can be in the same line after it. Similar to a div or display: block;.
  • Its size must be the one of his content, not expand to all line. Similar to a span or display: inline or display: inline-block;.
  • We can choice the kind of element (div, span, ...) but it must be a single one, no possible to use, by example, a span followed of a <br>.

In the following example there are several tries to obtain this behavior, all them unsuccessful.:

body {
  width: 200px;
}

#yellow {
  height: 50px;
  background-color: yellow;
  border: 2px solid black;
}

#red {
  height: 50px;
  background-color: red;
  border: 2px solid black;
  display: inline-block;
}

#blue {
  height: 50px;
  background-color: blue;
  border: 2px solid black;
  display: inline-block;
}

.child {
width: 50px;
}
<!DOCTYPE html>
<html>
<body>

<div id="yellow">
  <div class="child"></div>
</div>
<div id="red">
  <div class="child"></div>
</div>
<div id="blue">
  <div class="child"></div>
</div>

</body>
</html>

The yellow div expands over all line width, exceeding the 50px of its content. The red one ( a div with display inline-block) has the correct size, but doesn't forces next div (the blue one) to appear in next line.

Answer :

Can use max-width: fit-content? Not supported on IE or Edge.

body {
  width: 200px;
}

#yellow {
  height: 50px;
  background-color: yellow;
  border: 2px solid black;
  max-width: -webkit-fit-content;
  max-width: -moz-fit-content;
  max-width: fit-content;
}

#red {
  height: 50px;
  background-color: red;
  border: 2px solid black;
  display: inline-block;
}

#blue {
  height: 50px;
  background-color: blue;
  border: 2px solid black;
  display: inline-block;
}

.child {
width: 50px;
}
<!DOCTYPE html>
<html>
<body>

<div id="yellow">
  <div class="child"></div>
</div>
<div id="red">
  <div class="child"></div>
</div>
<div id="blue">
  <div class="child"></div>
</div>

</body>
</html>



Share : facebook icon twitter icon
Related Posts Related Posts :
  • clear array after form submit
  • pass url variable to javascript
  • access data using api
  • div position fixed css
  • add horizontal line between two div
  • disable toggle button css
  • css fixed line height
  • background image not working
  • table cell border
  • text line break css
  • overlay div on div
  • text direction rtl css
  • javascript convert string to an object
  • bind inner div click to outer div
  • jquery ajax oncomplete
  • how to use promise in for loop
  • jquery get element using variable
  • javascript send textbox value
  • pass div class content to another class or id
  • css calc not working properly
  • link disabled jquery
  • sql join table to subquery
  • MS Access SQL Issue with OR AND Operators
  • set textarea value using php
  • php merge two arrays into one
  • php form with google captcha
  • update current row in php
  • php date format mysql
  • mysql pdo select query
  • php function return an array
  • PHP mysqldump database to sql file
  • display image query
  • php create array using foreach loop
  • associative array php
  • group_concat in mysql laravel
  • php array_push empty
  • mysql on update cascade not working
  • pdo insert prepared statement
  • mysql insert ignore vs on duplicate key
  • mysql insert into existing row
  • mysql multi insert query
  • mysql group by show all rows
  • php change profile image
  • combine multiple arrays into one array php
  • how to sum values in an array
  • how to get sum of the total time
  • How to Create Facebook live stream without notification using API ?
  • on button click make div visible
  • css affect another element on hover
  • insert line after paragraph word
  • shadow
    Privacy Policy - Terms - Contact Us © bighow.org