动态设置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）

回答

相关问题