内嵌设置:保证金,位置和填充时,显示器不工作。 从相对位置也怪异的行为

我有两个CSS类:

.class1 { height: 100%; width: 300px; border: 1px none #B0B0B0; position: relative; display: inline; left: 10px; } .class2 { height: 100%; width: 200px; position: relative; display: inline; margin-left: 15px; background-color: #00CCCC; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; }

现在,你可以看到,他们都集一行中显示(不换行中的元素之间)。 它正常工作。 但由于某些原因,自从我设置显示为内联,填充,定位和保证金CSS都刚刚停止工作。 我可以添加一个利润率左10英寸什么都不会发生。 同样的,填充和定位。

任何人都可以解释如何解决这一问题?

另外,我的相对位置上的两个类设置,但在浏览器中查看网页时, .class2了几圈.class1时,其应该是刚过.class1

有任何想法吗?

编辑:

好了,我已经做了的jsfiddle,但它似乎是玩起来更加有....

貌似Width不工作....

这里是:

http://jsfiddle.net/zYbwh/1/

--------------解决方案-------------

您需要使用

display: inline-block;

。而不是margin不工作display: inline元素,但与inline-block它。 然后,您可以与利润率和明确的宽度/高度内联元素。

为了使IE7这项工作,加上这两行:

*display: inline;
zoom: 1;

这是可怕的,但它的工作原理。

我知道这是一个相当晚的答案,但我写了支持内联元素填充(带断字)看到这的jsfiddle一个jQuery插件:

http://jsfiddle.net/RxKek/

插件代码:

$.fn.outerHTML = function () {
// IE, Chrome & Safari will comply with the non-standard outerHTML, all others (FF) will have a fall-back for cloning
return (!this.length) ? this : (this[0].outerHTML || (
function (el) {
var div = document.createElement('div');
div.appendChild(el.cloneNode(true));
var contents = div.innerHTML;
div = null;
return contents;
})(this[0]));

};

/*
Requirements:

1. The container must NOT have a width!
2. The element needs to be formatted like this:

<div>text</div>

in stead of this:

<div>
text
</div>
*/

$.fn.fixInlineText = function (opt) {
return this.each(function () {
//First get the container width
var maxWidth = opt.width;

//Then get the width of the inline element
//To calculate the correct width the element needs to
//be 100% visible that's why we make it absolute first.
//We also do this to the container.
$(this).css("position", "absolute");
$(this).parent().css("position", "absolute").css("width", "200%");

var width = $(this).width();

$(this).css("position", "");
$(this).parent().css("position", "").css("width", "");

//Don't do anything if it fits
if (width < maxWidth) {
return;
}

//Check how many times the container fits within the box
var times = Math.ceil(width / maxWidth);

//Function for cleaning chunks
var cleanChunk = function (chunk) {
var thisChunkLength = chunk.length - 1;

if (chunk[0] == " ") chunk = chunk.substring(1);
if (chunk[thisChunkLength] == " ") chunk = chunk.substring(0, thisChunkLength);

return chunk;
};

//Divide the text into chunks
var text = $(this).html();
var textArr = text.split(" ");

var chunkLength = Math.ceil((textArr.length - 1) / times);
var chunks = [];

var curChunk = "";
var curChunkCount = 0;

var isParsingHtml = false;

//Loop through the text array and split it into chunks
for (var i in textArr) {
//When we are parsing HTML we don't want to count the
//spaces since the user doesn't see it.
if (isParsingHtml) {
//Check for a HTML end tag
if (/<\/[a-zA-Z]*>/.test(textArr[i]) || /[a-zA-Z]*>/.test(textArr[i])) {
isParsingHtml = false;
}
} else {
//Check for a HTML begin tag
if (/<[a-zA-Z]*/.test(textArr[i])) {
isParsingHtml = true;
}
}

//Calculate chunks
if (curChunkCount == (chunkLength - 1) && !isParsingHtml) {
curChunk += textArr[i] + " ";
chunks.push(cleanChunk(curChunk));
curChunk = "";
curChunkCount = -1;
} else if ((i == (textArr.length - 1))) {
curChunk += textArr[i];
chunks.push(cleanChunk(curChunk));
break;
} else {
curChunk += textArr[i] + " ";
}

if (!isParsingHtml) {
curChunkCount++;
}
}

//Convert chunks to new elements
var el = $($(this).html("").outerHTML());

for (var x in chunks) {
var new_el = el.clone().html(chunks[x]).addClass("text-render-el");
var new_el_container = $("<div/>").addClass("text-render-container");

new_el_container.append(new_el);

$(this).before(new_el_container);
}

//Finally remove the current element
$(this).remove();
});

};

这就是你使用模板时,你得到的问题,香港专业教育学院编程在PHP网站,但设计是我的命。 所以我try'd为webdesigners一些火箭燃料。

这也是我不断收到的每一步的问题...直列块不工作对我来说,没有什么作品,becouse这不是我设计的,我不知道该设置。

香港专业教育学院tryd做设计我自己,但我出来的时候,我需要一个设计昨天。

我建议你​​采取什么ü从模板中需要和其他东西都删除,这将schrink您的问题,节省您的时间。

分类:CSS 时间:2015-03-15 人气:3
本文关键词: CSS,造型
分享到:

相关文章

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 0.660 (s). 10 q(s)