发表新帖
发表新帖

Making a div float left, but not “fall” if text is too long

前端 未结
关注
3 2125
一个人的身影
一个人的身影 2021-02-07 11:04

I\'m sorry for the horrible title.

Essentially, I have a containing div which contains two divs with position: relative; and

相关标签:
3条回答
  • 清酒与你
    2021-02-07 11:29

    Question was a bit vague, but I think max-width is what you need - here's a sample HTML:

    <html>
  <head>
    <style type="text/css">
      #wrap {
        position: relative;
      }

      .inner {
        position: relative;
        display: inline-block;
        float: left;
        max-width: 300px;
      }

      #one {
        border: 1px solid red;
        width: 200px;
      }

      #two {
        border: 1px solid blue;
      }
    </style>
  </head>

  <body>
    <div id="wrap">
      <div id="one" class="inner">Insert long text...</div>
      <div id="two" class="inner">Insert more long text...</div>
    </div>
  </body>
</html>

    I hope I interpreted what you meant correctly.

    0 讨论(0)
  • 你的背包
    2021-02-07 11:36

    I'm not sure if you need the second div to be floated but here's an example that seems to do what you want with the second div having the float removed but having a 200px margin added to it.

    http://jsfiddle.net/chrisvenus/ZdFwD/1/

    I also swapped the images for fixed width DIVs since on my browser the broken image was just being removed.

    If the content in the right becomes too big and unbreakable then the overflow will ensure scrollbars are created for that div instead of it increasing the div size and then dropping it down or other undesired behaviour.

    this might not be perfect for your needs but if not it should be a good start. :)

    0 讨论(0)
  • 隐瞒了意图╮
    2021-02-07 11:37

    overflow is the magic word.

    You can use it both to get rid of that ugly clearing div, and to have the second div take up whatever space is left next to the float.

    Also, the .content div:last-child rule you have in your CSS applies to the empty clearing div instead of your second column, so it isn't actually doing anything.

    Here's what it will look like (and the updated fiddle):

    <!doctype html>
<style>
.content {
  margin: 10px;
  padding: 0;
  border: 1px solid black;
  overflow: hidden; /* replaces <div class="clear"/> */
}

.columns {
  position: relative;
  float: left;
  padding-right: 20px;
  margin-bottom: 10px;
}

.c2 {
  float: none; /* Don't float this column... */
  overflow: hidden; /* ... Create a new block formatting context instead */
  padding-right: 10px;
  word-wrap: break-word;
}
</style>

<div class="content">
    <div class="columns">
        <img src="#" height="200px" width="200px" />
    </div>
    <div class="columns c2">
        TestingTestingTestingTesting
    </div>
</div>
    0 讨论(0)
 看不清?
提交回复
热议问题