動態設置HTML元素的大小（使用Zurb基金會4）

我有這個div（如果我們喜歡，它可能是跨度或其他非可點擊的元素）。它是messageAlertBox。動態設置HTML元素的大小（使用Zurb基金會4）

<div id="messageModal" class="medium reveal-modal"> 
    <div class="row"> 
     <div id="messageAlertBox" class="alert-box"></div> 
     <div class="small-6 large-6 columns"><p id="messageText" class="lead"></p></div> 
    </div> 
    <a class="close-reveal-modal">x</a> 
</div>

那我下面給它：

function notifyUser(alertType, messageText) { 
    if (alertType === 'Success') { 
     $('#messageAlertBox').addClass('success'); 
    } else if (alertType === 'Error') { 
     $('#messageAlertBox').addClass('alert'); 
    } 

    $('#messageAlertBox').html(alertType); 
    $('#messageText').html(messageText); 
    openModal = 'messageModal'; 
}

其中「警告類型」可能是未知長度的字符串。

發生了什麼事是messageAlertBox和它所包含的元素一樣寬。我已經搞砸了很多，如果它不是最大的，我已經設法讓它太窄。基本上只是[]。

我需要這個元素與字符串alertType一樣寬（加上一點點）。我認爲跨度會自動完成，但我想我錯了。

我該怎麼做？

來源

2013-05-12 Lurk21

除非另有說明，Div的自動佔據整個頁面寬度。

在你的CSS

，用於股利（或類）

嘗試添加此：（可以使用DIV，或者你的ID）

div 
{ 
    display:inline-block; 
}

默認的顯示值是塊，它沒有按」 t允許元素放在旁邊。

內嵌塊將寬度設置爲「需要使用的內容」並防止div佔用頁面的整個寬度。

如果只是文字，顯示：內聯應該工作過，無論是一個:)

來源

2013-05-12 00:41:13 Senjai

如果我沒有記錯，跨度是內聯的。我嘗試用跨度替換div並刪除jQuery.html（'span wrapper。這也佔用了整行。 – Lurk21 2013-05-12 00:48:09

你能發佈更多的代碼嗎 – Senjai 2013-05-12 00:52:18

當然，我現在編輯我的帖子... – Lurk21 2013-05-12 00:54:42

如果我理解正確的話，你的魔杖#messageAlertBox到一樣寬跨度再加上一點點填充？你可以做到這一點的只是將其設置爲display：block（或內聯塊，如果你喜歡）：

div { 
    display: inline; 
    padding: 5px; 
}

http://jsfiddle.net/vaAJB/2/

來源

2013-05-12 00:45:55

這有效，除了它打破了zurb的基礎，並在行的末尾結束。關閉tho – Lurk21 2013-05-12 00:54:26

只需使用id而不是元素選擇器。所以#messageAlertBox {display：inline;} – 2013-05-12 00:56:24

我已經將style =「display：inline」添加到了特定的元素，而不是div類。 – Lurk21 2013-05-12 00:58:59

想通了。

<div class="small-1 large-1 columns"><span id="messageAlertBox" class="alert-box" style="display: inline;"></span></div>

small-1列div將內容定位在行中的正確位置。內容跨越到內嵌樣式文本的大小。

該解決方案能夠響應瀏覽器窗口大小而不違反文本大小的限制。

來源

2013-05-12 01:26:50 Lurk21

動態設置HTML元素的大小（使用Zurb基金會4）

回答

相關問題