Question

MIME-Version: 1.0
Content-Type: multipart/mixed; 
    boundary="----=_Part_0_797681969.1457074816557"

------=_Part_0_797681969.1457074816557
Content-Type: text/plain; charset=us-ascii
Content-Transfer-Encoding: 7bit

This is message body
------=_Part_0_797681969.1457074816557
Content-Type: application/octet-stream; name="?????????? 2016.pdf"
Content-Transfer-Encoding: base64
Content-Disposition: attachment; 
    filename*=Cp1252''%3F%3F%3F%3F%3F%3F%3F%3F%3F%3F%202016.pdf

#body {
    background-color: rgba(51, 5, 22, 0.5);
    padding: 0.5em;
    overflow: hidden;
}
#category, #mission {
    text-transform: uppercase;
    font-weight:bolder;
    float: left;
}
#mission {
    margin-left: 8em;
}
.category-picked, .mission-picked {
    text-transform: none;
    font-weight: normal;
}

我正在尝试制作一个单独的div，但必须保持内联。我尽量避免使用 <div id="body"> <div id="category"> <div class="category-header"> Category </div> <div class="category-picked"> Random Picked Oneeeeeee </div> </div> <div id="mission"> <div class="mission-header"> Mission </div> <div class="mission-picked"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis metus nibh, placerat vitae vehicula eu, lobortis id eros. Nam ac ipsum enim. Cras in elit sed ligula accumsan venenatis. Fusce interdum, nibh eleifend ullamcorper gravida, enim augue tristique orci, a fringilla mi velit sed erat. Sed nulla augue, tempus eu nisl a, tincidunt egestas magna. Mauris non nulla tempus, tincidunt nibh at, scelerisque velit. Mauris vulputate ut odio id ultrices. Fusce et pulvinar metus. Nullam suscipit accumsan libero eu fringilla. Curabitur vulputate eu metus quis dapibus. Etiam dapibus mi eu mi lacinia, id facilisis orci dapibus. Donec vel nisi hendrerit, facilisis quam interdum, facilisis dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </div> </div> </div> 并给我的div table以使其保持响应。

当你看到div互相推开时，我想让它们保持内联，就像文本很短。我该怎么做呢？

我也搞砸了 https://jsfiddle.net/63s8hadd/

Answer 1

检查一下，

＆＃13;

#body {
    background-color: rgba(51, 5, 22, 0.5);
    padding: 0.5em;
    overflow: hidden;
}
#category, #mission {
    text-transform: uppercase;
    font-weight:bolder;
    /*float: left;*/
}
#mission {
    /*margin-left: 8em; Why? */
}
.category-picked, .mission-picked {
    text-transform: none;
    font-weight: normal;
}
.table{
  display: table;
}
.tr{
  display: table-row;
  }
.td{
  display: table-cell
}

＆＃13;

<!-- BODY SECTION START !-->
    <div id="body" class="table">
        <div id="category" class="tr">
            <div class="category-header td">
                Category
            </div>
             <div class="category-picked td">
                Random Picked Oneeeeeee
            </div>
        </div>
        <div id="mission" class="tr">
            <div class="mission-header td">
                Mission 
            </div>
            <div class="mission-picked td">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis metus nibh, placerat vitae vehicula eu, lobortis id eros. Nam ac ipsum enim. Cras in elit sed ligula accumsan venenatis. Fusce interdum, nibh eleifend ullamcorper gravida, enim augue tristique orci, a fringilla mi velit sed erat. Sed nulla augue, tempus eu nisl a, tincidunt egestas magna. Mauris non nulla tempus, tincidunt nibh at, scelerisque velit. Mauris vulputate ut odio id ultrices. Fusce et pulvinar metus. Nullam suscipit accumsan libero eu fringilla. Curabitur vulputate eu metus quis dapibus. Etiam dapibus mi eu mi lacinia, id facilisis orci dapibus. Donec vel nisi hendrerit, facilisis quam interdum, facilisis dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
            </div>
        </div>
    </div>
    <!-- BODY SECTION END !-->

＆＃13;

小提琴：https://jsfiddle.net/63s8hadd/1/

注意：值＆＃34; inline-table＆＃34;，＆＃34; table＆＃34;，＆＃34; table-caption＆＃34;，＆＃34; table-cell＆＃34;，＆＃34; table-column＆＃34;，＆＃34; table-column-group＆＃34;，＆＃34; table-row＆＃34;，和＆＃34;表列组＆＃34; IE7及更早版本不支持。 IE8需要一个！DOCTYPE。 IE9支持这些值。

REF：http://www.w3schools.com/cssref/pr_class_display.asp

浮动div试图保持响应

1 个答案: