发表新帖
发表新帖

HTML divs, how to wrap content?

后端 未结
关注
10 1759
忘了有多久
忘了有多久 2021-02-01 08:07

I have 3 div\'s like on this image:

\"enter

div1 has fixed width but variable hei

相关标签:
10条回答
  • 北海茫月
    2021-02-01 08:54

    Atlast, I got it :) Just wrap all those three elements in a parent element as shown below.

    HTML

    <div class="main">
   <div class="div1"></div>  <!-- Change height to see result -->
   <div class="div2"></div>
   <div class="div3"></div>
</div>

    CSS

    .main{width:200px;height:200px;border:1px solid black;overflow:hidden;}
.div1{width:100px;min-height:100px;float:left;background-color:green;}
.div2{width:100px;display:inline-block;height:100px;background-color:blue;}
.div3{width:100px;display:inline-block;height:100px;background-color:red;margin-top:-4px;}

    Working fiddle

    If you want to have the width of the third div to be wide from before itself then I highly recommend you to go with jQuery.

    .div3{width:200px;}  /* Keeping width wide enough with the container */

    jQuery

    $(function(){
    if($('.div1').height() > 100)
       $('.div3').width(100)
});

    Working Fiddle

    0 讨论(0)
  • 無奈伤痛
    2021-02-01 08:56

    I probably missed read the question but does this not have have the desired layout you wanted.

    https://jsfiddle.net/94ohw4hq/

    <div id="container">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
<div class="bottom">
Bottom
</div>
</div>
    0 讨论(0)
  • 时光取名叫无心
    2021-02-01 09:01

    Use

    wookmark plugin

    to solve your problem

    0 讨论(0)
  • 南笙
    2021-02-01 09:04

    This should work for you, at least pointing you in the right direction.

    CSS:

    .box {border:1px dashed black;}
#content {width:1000px;}
#clear {clear:both;}

#left {float:left; width:200px; height:100px; margin-right:15px;}
#top {float:left; width:780px; height:200px;}
#main {float:left; min-width:780px; max-width:1000px;}

    HTML:

    <html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>

<div class="box" id="content">
<div class="box" id="left">Left</div>
<div class="box" id="top">Top</div>
<div class="box" id="main">Main</div>
<div id="clear"></div>
</div>

</body>
</html>
    0 讨论(0)
 看不清?
提交回复
热议问题