zoukankan      html  css  js  c++  java
  • Why aren't two border-box 50% divs side-by-side? [duplicate]

    Why aren't two border-box 50% divs side-by-side? [duplicate]

    Because div elements are display: block by default (that is, one element per row/line). You need to set them to float or display: inline-block. Also note that display: inline-block will add its own space between the two blocks which would have to be nullified. – Harry Sep 24 '15 at 16:02 

    回答1

    First you need to understand that elements in HTML based on display property are of 2 types -

    • Block (eg: div, p, h1 - h6..etc)
    • inline (eg: span..etc)

    Block level elements appear one below another, or as you may call it being stacked below each other,

    whereas,

    inline elements are created on the same line unless they are specifically styled as display: block OR if they encounter a <br /> tag.

    SOLUTION:

    1. You can use the property display:inline-block

      Problem: It will add white spaces and put the second div on the next line even with  50%;. Now, there are several ways to remove whitespaces, you can try any one of them.

    2. Use float: lefton both the div's

    body {
        	padding: 0;
        	margin: 0;
        }
        div {
        	height: 300px;
        }
        .left {
        	background-color: blue;
        }
        .right {
        	background-color: red;
        }
        .half {
        	 50%;
            float: left;
        }
    
        .half-new {
            display: inline-block;
             50%
        }
    <h1>Using Float</h1>
    <div class="half left"></div>
    <div class="half right"></div>
    <hr />
    <h1>Using inline-block</h1>
    <div class="half-new left"></div><!--
    --><div class="half-new right"></div>

    Fighting the Space Between Inline Block Elements

    How do I remove the space between inline/inline-block elements?

    回答1

    Since this answer has become rather popular, I'm rewriting it significantly.

    Let's not forget the actual question that was asked:

    How to remove the space between inline-block elements? I was hoping for a CSS solution that doesn't require the HTML source code to be tampered with. Can this issue be solved with CSS alone?

    It is possible to solve this problem with CSS alone, but there are no completely robust CSS fixes.

    The solution I had in my initial answer was to add font-size: 0 to the parent element, and then declare a sensible font-size on the children.

    http://jsfiddle.net/thirtydot/dGHFV/1361/

    This works in recent versions of all modern browsers. It works in IE8. It does not work in Safari 5, but it does work in Safari 6. Safari 5 is nearly a dead browser (0.33%, August 2015).

    Most of the possible issues with relative font sizes are not complicated to fix.

    However, while this is a reasonable solution if you specifically need a CSS only fix, it's not what I recommend if you're free to change your HTML (as most of us are).


    This is what I, as a reasonably experienced web developer, actually do to solve this problem:

    <p>
        <span>Foo</span><span>Bar</span>
    </p>
    

    Yes, that's right. I remove the whitespace in the HTML between the inline-block elements.

    It's easy. It's simple. It works everywhere. It's the pragmatic solution.

    You do sometimes have to carefully consider where whitespace will come from. Will appending another element with JavaScript add whitespace? No, not if you do it properly.

    Let's go on a magical journey of different ways to remove the whitespace, with some new HTML:

    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    
    • You can do this, as I usually do:

      <ul>
          <li>Item 1</li><li>Item 2</li><li>Item 3</li>
      </ul>
      

      http://jsfiddle.net/thirtydot/dGHFV/1362/

    • Or, this:

      <ul>
          <li>Item 1</li
          ><li>Item 2</li
          ><li>Item 3</li>
      </ul>
      
    • Or, use comments:

      <ul>
          <li>Item 1</li><!--
          --><li>Item 2</li><!--
          --><li>Item 3</li>
      </ul>
      
    • Or, if you are using using PHP or similar:

      <ul>
          <li>Item 1</li><?
          ?><li>Item 2</li><?
          ?><li>Item 3</li>
      </ul>
      
    • Or, you can even skip certain closing tags entirely (all browsers are fine with this):

      <ul>
          <li>Item 1
          <li>Item 2
          <li>Item 3
      </ul>
      

    Now that I've gone and bored you to death with "one thousand different ways to remove whitespace, by thirtydot", hopefully you've forgotten all about font-size: 0.


    Alternatively, you can now use flexbox to achieve many of the layouts that you may previously have used inline-block for: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    回答2

    For CSS3 conforming browsers there is white-space-collapsing:discard

    see: http://www.w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing

    This was removed from Text Level 3, but Text Level 4 has text-space-collapse:discard. It's 2016 already and still no support. – Oriol Jan 4 '16 at 15:53

    回答3

    EDIT:

    today, we should just use Flexbox.


    OLD ANSWER:

    OK, although I've upvoted both the font-size: 0; and the not implemented CSS3 feature answers, after trying I found out that none of them is a real solution.

    Actually, there is not even one workaround without strong side effects.

    Then I decided to remove the spaces (this answers is about this argument) between the inline-block divs from my HTML source (JSP), turning this:

    <div class="inlineBlock">
        I'm an inline-block div
    </div>
    <div class="inlineBlock">
        I'm an inline-block div
    </div>
    

    to this

    <div class="inlineBlock">
        I'm an inline-block div
    </div><div class="inlineBlock">
        I'm an inline-block div
    </div>
    

    that is ugly, but working.

    But, wait a minute... what if I'm generating my divs inside Taglibs loops (Struts2JSTL, etc...) ?

    For example:

    <s:iterator begin="0" end="6" status="ctrDay">
        <br/>
        <s:iterator begin="0" end="23" status="ctrHour">
            <s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}">
                <div class="inlineBlock>
                    I'm an inline-block div in a matrix 
                    (Do something here with the pushed object...)
               </div>
           </s:push>
        </s:iterator>
    </s:iterator>
    

    It is absolutely not thinkable to inline all that stuff, it would mean

    <s:iterator begin="0" end="6" status="ctrDay">
        <br/>
        <s:iterator begin="0" end="23" status="ctrHour"><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><div class="inlineBlock>
                    I'm an inline-block div in a matrix             
                    (Do something here with the pushed object...)
               </div></s:push></s:iterator>
    </s:iterator>
    

    that is not readable, hard to mantain and understand, etc...

    The solution i found:

    use HTML comments to connect the end of one div to the begin of the next one!

    <s:iterator begin="0" end="6" status="ctrDay">
       <br/>
       <s:iterator begin="0" end="23" status="ctrHour"><!--
        --><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><!--
            --><div class="inlineBlock>
                    I'm an inline-block div in a matrix             
                    (Do something here with the pushed object...)
               </div><!--
        --></s:push><!--
    --></s:iterator>
    </s:iterator>
    

    This way you will have a readable and correctly indented code.

    And, as a positive side effect, the HTML source, although infested by empty comments, will result correctly indented;

    let's take the first example. In my humble opinion, this:

        <div class="inlineBlock">
            I'm an inline-block div
        </div><!--
     --><div class="inlineBlock">
            I'm an inline-block div
        </div>
    

    is better than this:

        <div class="inlineBlock">
             I'm an inline-block div
        </div><div class="inlineBlock">
             I'm an inline-block div
        </div>
  • 相关阅读:
    [array] leetcode
    [array] leetcode
    [array] leetcode
    无法将“Scaffold-DbContext”项识别为 cmdlet、函数、脚本文件或可运行程序的名称...
    远程桌面报错解决:No Remote Desktop License Servers Available
    linux设置开机自启动
    阿里云ECS服务器环境搭建 ubuntu 16.04 图形界面的安装
    VS C#程序打包覆盖安装不能更新的解决方法
    MySql EF6 DBFirst 向导无法生成 edmx 解决方法(同:您的项目引用了最新实体框架;但是,找不到数据链接所需的与版本兼容的实体框架数据库提供程序)
    "docker build" requires exactly 1 argument(s).
  • 原文地址:https://www.cnblogs.com/chucklu/p/14275108.html
Copyright © 2011-2022 走看看