html - tag - 網頁header固定




如何使div不超過其內容? (20)

CSS2兼容的解決方案是使用:

.my-div
{
    min-width: 100px;
}

你也可以浮動你的div,這會迫使它盡可能小,但是如果div內的任何東西是浮動的,你將需要使用clearfix

.my-div
{
    float: left;
}

我有一個佈局類似於:

<div>
    <table>
    </table>
</div>

我希望div能夠擴大到和我的table一樣寬。


Personnaly,我只是這樣做:

HTML代碼:

<div>
    <table>
    </table>
</div>

CSS代碼:

div {
    display: inline;
}

如果你在你的div上應用float,它也可以工作,但很明顯,你需要在下一個HTML元素上應用“清除這兩個”CSS規則。


好的,在很多情況下,你甚至不需要做任何事情,因為默認情況下,div的heightwidth都是auto,但如果不是你的情況,應用inline-block顯示器可以為你工作......查看我創建的代碼對你而言,它是做你想要的:

div {
  display: inline-block;
}
<div>
  <table>
    <tr>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>
      <td>Nunc auctor aliquam est ac viverra. Sed enim nisi, feugiat sed accumsan eu, convallis eget felis. Pellentesque consequat eu leo nec pharetra. Aenean interdum enim dapibus diam.</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>
    </tr>
  </table>
</div>


一個工作演示在這裡 -

.floating-box {
    display:-moz-inline-stack;
    display: inline-block;

    width: fit-content; 
    height: fit-content;

    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21;  
}
<h2>The Way is using inline-block</h2>

Supporting elements are also added in CSS.

<div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
</div>


你可以簡單地使用display: inline; (或者white-space: nowrap; )。

希望這個對你有幫助。



你需要一個塊元素,它具有什麼CSS調用縮小到合適的寬度,並且規範沒有提供一種幸運的方式來獲得這樣的事情。 在CSS2中,縮小適合併不是一個目標,但意味著要處理瀏覽器“不得不”無法獲得寬度的情況。 這些情況是:

  • 浮動
  • 絕對定位的元素
  • 內嵌塊元素
  • 表元素

當沒有指定寬度時。 我聽說他們想在CSS3中添加你想要的東西。 現在,請與上述其中一個做好準備。

不直接暴露該功能的決定可能看起來很奇怪,但有一個很好的理由。 它是昂貴的。 縮小至合適意味著格式化至少兩次:在知道其寬度之前,您無法開始格式化元素,並且無法計算穿過整個內容的寬度。 另外,不需要像人們想像的那樣經常需要縮小到適合的元素。 為什麼你需要在桌子上放置額外的div? 也許表格標題是你需要的。


修改(如果您有多個子項,則可以使用):您可以使用jQuery(查看JSFiddle鏈接)

var d= $('div');
var w;


d.children().each(function(){
 w = w + $(this).outerWidth();
 d.css('width', w + 'px')
});

不要忘記包含jQuery ...

在這裡看到JSfiddle


嘗試display: inline-block; 。 為了使它跨瀏覽器兼容,請使用下面的CSS代碼。

div {
  display: inline-block;
  display:-moz-inline-stack;
  zoom:1;
  *display:inline;
  border-style: solid;
  border-color: #0000ff;
}
<div>
  <table>
    <tr>
      <td>Column1</td>
      <td>Column2</td>
      <td>Column3</td>
    </tr>
  </table>
</div>


如果你的容器突破了線路,幾個小時後尋找一個好的CSS解決方案,並找不到任何東西, 我現在使用 jQuery:

$('button').click(function(){

  $('nav ul').each(function(){
    
    $parent = $(this).parent();
    
    $parent.width( $(this).width() );
    
  });
});
nav {
  display: inline-block;
  text-align: left; /* doesn't do anything, unlike some might guess */
}
ul {
  display: inline;
}

/* needed style */
ul {
  padding: 0;
}
body {
  width: 420px;
}

/* just style */
body {
  background: #ddd;
  margin: 1em auto;
}
button {
  display: block;
}
nav {
  background: #bbb;
  margin: 1rem auto;
  padding: 0.5rem;
}
li {
  display: inline-block;
  width: 40px;
  height: 20px;
  border: solid thin #777;
  margin: 4px;
  background: #999;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>fix</button>

<nav>
  <ul>
    <li>3</li>
    <li>.</li>
    <li>1</li>
    <li>4</li>
  </ul>
</nav>

<nav>
  <ul>
    <li>3</li>
    <li>.</li>
    <li>1</li>
    <li>4</li>
    <li>1</li>
    <li>5</li>
    <li>9</li>
    <li>2</li>
    <li>6</li>
    <li>5</li>
    <li>3</li>
    <li>5</li>
  </ul>
</nav>


您可以使用inline-block作為@ user473598,但要注意舊版瀏覽器。

/* Your're working with */
display: inline-block;

/* For IE 7 */
zoom: 1;
*display: inline;

/* For Mozilla Firefox < 3.0 */
display:-moz-inline-stack;

Mozilla根本不支持內聯塊,但他們有-moz-inline-stack ,它大致相同

一些inline-block顯示屬性的跨瀏覽器: https://css-tricks.com/snippets/css/cross-browser-inline-block/https://css-tricks.com/snippets/css/cross-browser-inline-block/

您可以在以下https://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/查看一些使用此屬性的測試: https://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/https://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/


我們可以在div元素上使用這兩種方法中的任何一種:

display: table;

要么,

display: inline-block; 

我更喜歡使用display: table; ,因為它處理所有額外的空間。 雖然display: inline-block需要一些額外的空間修復。


我已經通過在div標籤內添加一個span標籤並將CSS格式從外部div標籤移動到新內部來解決了類似的問題(我不想使用display: inline-block因為項目居中) span標籤。 只要將其作為另一種替代方法拋出display: inline block如果display: inline block不適合您。


我想用

display: inline-block;

會工作,但我不確定瀏覽器的兼容性。

另一種解決方案是將你的div封裝在另一個div (如果你想保持塊的行為):

HTML:

<div>
    <div class="yourdiv">
        content
    </div>
</div>

CSS:

.yourdiv
{
    display: inline;
}

我試過div.classname{display:table-cell;}它工作!


有兩個更好的解決方案

  1. display: inline-block;

    要么

  2. display: table;

在這兩個display:table; 更好。

用於display:inline-block; 您可以使用負邊距方法來修復額外的空間


解決方法是設置你的div display: inline-block



<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>

    <div id="content_lalala">
        this content inside the div being inside a table, needs no inline properties and the table is the one expanding to the content of this div =)
    </div>

</td>
</tr>
</table>

我知道人們有時候不喜歡桌子,但是我必須告訴你,我嘗試了CSS內聯黑客,他們有點在某些div中工作,但在其他人中卻沒有,所以,將擴展div放入一張桌子......並且......它可以具有或不具有內聯屬性,並且該表格仍然可以容納內容的總寬度。 =)


div{
  width:auto;
  height:auto;
}






width