attribute <p></p> doesn't do a line-break while working with flexible boxes
Question
I am designing a flexible website composed of 5 elements (4 <div> elements and 1 <iframe> ), where everything works fine up until the moment when I add <p></p> element which doesn't want to give me a line-break. I tried also including display:block; in the CSS and tried to style in many different ways but nothing made any difference; mostly it just displaces all website.
Thanks for any help!
Here's the code:
<!DOCTYPE html><!--<!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"-->
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
body{width:100%;
-webkit-box-orient:vertical;
-webkit-box-pack: center;
margin: 0px auto;
padding: 0px;
display: -webkit-box;}
div,iframe{border:1px solid black;
-webkit-box-flex:1;
display: -webkit-box;}
div#pas1{height: 33.33vh;
-webkit-box-pack: center;
-webkit-box-align: end;}
div#pas2{-webkit-box-orient:horizontal;
height: 33.33vh;}
div#a{width: 33.33vw;
-webkit-box-pack: end;
-webkit-box-align: center;
border:1px solid black;}
div#iframe{width:33.33vw;
max-width:500px;}
div#b{width: 33.33vw;
-webkit-box-pack: start;
-webkit-box-align: center;}
div#pas3{height: 33.33vh;
-webkit-box-pack: start;}
</style>
</head>
<body>
<div id="pas1">
</div>
<div id="pas2">
<div id="a"><p><a target="jednotka">a</a></p>
<p><a target="jednotka">b</a></p>
<p><a target="jednotka">c</a></p></div>
<div id="iframe"><iframe name="jednotka" ></iframe></div>
<div id="b"></div>
</div>
<div id="pas3">
</div>
</body>
</html>
2 answers
solution1
0 2016-12-31 00:28:58
So you want line break for the p element inside the div id #a.you can try this div#ap{width:100%; display:inline-block;} check the css part I also added some additional css for styling but that display:inline-block; and width is the reason for the line-break. The css you set in side div#a {-webkit-box-pack: end;} is the reason text start at the of the div#a Fiddle
body { width: 100%; -webkit-box-orient: vertical; -webkit-box-pack: center; margin: 0px auto; padding: 0px; display: -webkit-box; } div, iframe { border: 1px solid black; -webkit-box-flex: 1; display: -webkit-box; } div#pas1 { height: 33.33vh; -webkit-box-pack: center; -webkit-box-align: end; } div#pas2 { -webkit-box-orient: horizontal; height: 33.33vh; } div#a { width: 33.33vw; -webkit-box-pack: end; -webkit-box-align: center; border: 1px solid black; } div#iframe { width: 33.33vw; max-width: 500px; } div#b { width: 33.33vw; -webkit-box-pack: start; -webkit-box-align: center; } div#pas3 { height: 33.33vh; -webkit-box-pack: start; } #ap { width:100%; display:inline-block; margin:0; } #apa{ text-decoration:none; margin:5px 0px; font-size:18px;}
<div id="pas1"> </div> <div id="pas2"> <div id="a"> <p><a href="#" target="jednotka">a</a></p> <p><a href="#" target="jednotka">b</a></p> <p><a href="#" target="jednotka">c</a></p> </div> <div id="iframe"> <iframe src="http://www.w3schools.com" name="jednotka"></iframe> </div> <div id="b"></div> </div> <div id="pas3"> </div>
solution2
0
Using the new flexbox specification standard: one & two .
https://jsfiddle.net/fz5vpten/
* {box-sizing: border-box; margin: 0;} body { width: 100%; margin: 0; padding: 0px; display: flex; flex-direction: column; align-content: center; } div { border: 1px solid black; flex: 1 1 auto; display: flex; } iframe {width: 100%; height: 100%; border: 0;} div#pas1 { height: 33.33vh; justify-items: center; align-items: flex-end; } div#pas2 { height: 33.33vh; flex-direction: row; } div#a { width: 33.33vw; border: 1px solid black; flex-direction: column; justify-content: center; align-items: flex-end; } div#iframe { width: 33.33vw; max-width: 500px; } div#b { width: 33.33vw; justify-content: flex-start; align-items: center; } div#pas3 { height: 33.33vh; justify-content: start; }
<div id="pas1"> </div> <div id="pas2"> <div id="a"> <p><a target="jednotka">a</a></p> <p><a target="jednotka">b</a></p> <p><a target="jednotka">c</a></p> </div> <div id="iframe"> <iframe name="jednotka"></iframe> </div> <div id="b"> </div> </div> <div id="pas3"> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.