Question

我的问题非常具体，从他/她阅读的那一刻起就会困扰任何网站开发人员。所以要小心！

我已经为我正在建设的网站制定了布局。我们的想法是页面上有一些倾斜的<hr/>元素，文本会将其包裹起来（见下图。黑线表示<hr/>）

the way it should be

你看到的是一些橙色条纹。其中每一个都是浮动元素，宽度为10px，然后是20px，然后是30px等。黑线表示它们停止的位置，因此它们会切断文本。

正如您可能猜到的那样，大橙色区域是一个浮动元素，其宽度为0，其高度为100%的父级减去其他70个浮动元素的高度（条纹）），即70px。

问题：这似乎不可能。我得到的是：

what actually happens

由于这些小条纹各自1px高，无论如何都会出现。但是最大的一个依赖于父母的高度。如果我要修正父母的身高，那就行了。但我希望盒子是动态的。这意味着我应该能够更改内部文本。此外，如果我要修复它的高度，上下缩放页面看起来很糟糕。

我需要做的是：第一个大浮动元素应该占用它需要的空间(100% - 70px)，而不给它的父级一个固定的高度，同时保持浮动。

我将奖励解决这个问题的人，我可以投入所有声誉，因为这已经困扰了我好几个月。

对于试图解决问题的人。有一些想法可能有所帮助：

表格单元格可以将元素与其对齐
我尝试过多种旋转方式。太糟糕了，没有颠倒的文字。
我尝试在第一个浮动div中添加边距，填充和边框。到目前为止，还没有一种组合有效。
我实际上并不希望元素浮动。这就是我选择尝试的方式，因为我不知道另一种方法来围绕元素包装文本。您可以自由尝试任何您想要的东西，只要内部文本可以更改，并且在放大或缩小时看起来一样好，就像通常一样。
我认为唯一的解决方案是使用Javascript来计算div需要的高度。

以下是包含在Fiddle

使用Javascript，浏览器应计算容器内容（文本，图像，边距等）的高度。然后，#lw应该更改为该高度。在那之后，#lw应该缩小1px。在此之后，应该检查内容是否发生了变化。如果发生这种情况，浏览器应检查内容高度的高度是否大于#lw + 70px的高度。如果它没有高于此值，则应重复该过程。如果是这样，#lw应该再次缩小1px，并且该过程应该停止。调整窗口大小时，该过程应从头开始。

这看起来像是一份工作，如果我认识JS，我会很感激地接受挑战。我想我已经去了Codecadamy。

编辑：

与此同时，我提出了一个不太复杂的问题版本。我已经研究过css-shapes，并发现这些将允许我做70个浮动元素所做的事情，只有一个元素。我已经制作了另一组文件，但是它需要一个js文件才能工作。我在这里做的是将HTML和CSS粘贴为代码，并链接到js代码。

与旧版本一样，代码应该测量最佳高度。在我的代码中，我添加了一个<script>标记，其中包含应该发生的具体描述。

我想我开始看起来很懒，因为我无法提供有关实际Javascript代码的任何输入。

HTML

<!doctype html>
    <html>
        <head>
            <meta charset="utf-8">
            <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
            <script src='js/shapes.polyfill.min.js'></script>
        </head>
        <body>
            <div id="container">
                <div id="polybreak"></div>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus enim arcu, porttitor vitae hendrerit euismod, efficitur pretium nulla. Sed a justo nulla. Aenean vel erat purus. In velit arcu, lacinia in justo in, vestibulum pellentesque mauris. Phasellus quis eros nunc. Vivamus fringilla euismod est, eget consectetur lacus cursus et. Fusce at arcu ac turpis laoreet feugiat nec a nulla.
                </p>
                <p>
                    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque vehicula mollis leo non tempus. Praesent scelerisque dui felis. Suspendisse tristique, sapien egestas semper cursus, elit quam facilisis sapien, sit amet ornare odio nibh sed nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum libero nisi, efficitur id felis non, maximus ultricies sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce rhoncus nibh enim, eget dignissim neque placerat et. Nam sit amet placerat sapien. Quisque vitae risus ac dolor porttitor tincidunt.
                </p>
                <p>
                    Nullam volutpat, lorem vitae ultricies lobortis, ligula ligula posuere erat, sed gravida sapien nisi non ante. Aliquam tellus sapien, placerat mollis tempor quis, consequat imperdiet magna. Etiam cursus ornare mauris sit amet varius. Sed dignissim euismod felis, at aliquet est fringilla at. Duis lorem nunc, imperdiet nec rhoncus et, egestas quis nunc. Nulla imperdiet elementum libero consequat tempor. Donec ante nunc, pellentesque nec ex dapibus, auctor sagittis ipsum. Phasellus ut est ex.
                </p>
            </div>
            <script src='js/shapes.polyfill.min.js'></script>
            <script type="text/javascript">
                On load and on resize:
                Make #polybreak the same height as #container + 60px.

                Subtract 1px off #polybreak''s height and check: is #container higher than #polybreak? If so, add 1px and stop. If not, repeat.
            </script>
        </body>
    </html>

CSS

html, body{
    margin: 0;
    padding: 0;
    height: 100%;
}

p{
    text-align: justify;
}

#container{
    width: 700px;
    margin: 0 auto;
}

#polybreak{
    width: 100%;
    float: left;
    shape-outside: polygon(0 calc(100% - 100px), 700px calc(100% - 1px), 700px 100%, 0 calc(100% - 99px));
}

链接到原始js代码 https://raw.githubusercontent.com/adobe-webplatform/css-shapes-polyfill/master/shapes-polyfill.min.js

Answer 1

由于每个人都以任何方式发布Javascript答案，让我们将一个实际的解决方案放入一堆。甚至使用Javascript的问题是没有定义的方法来“计算”#lw的最终高度，因为预测文本包装的行为是不可能的。

//Get a nice starting point
Zepto(".lW").hide();
var sh = document.getElementById("wrapper").scrollHeight;
document.getElementById("lw").style["height"] = sh - 60 + "px";
Zepto(".lW").show();

//Start the search
var height = parseInt(document.getElementById("lw").style["height"]);
var difference = Infinity;
var bestheight = 0;
var i = 0;
var checker = setInterval(function(){
    i++;
    height += 1;
    document.getElementById("lw").style["height"] = height + "px";
    var sh = document.getElementById("wrapper").scrollHeight;

    //Now the interesting part, we don't want to get the first situation
    // where the #lw is greater than the floats, what we want is the most
    // optimal part, which we are going to search over a certain pixel range.
    // In this case that pixel range is hardcoded as 30 pixels.
    if(Math.abs(height + 70 - parseInt(sh)) < difference){
        difference = Math.abs(height + 70 - parseInt(sh));
        bestheight = height;
    }
    if(i>30){
        clearInterval(checker);
        document.getElementById("lw").style["height"] = bestheight + "px";
    }
},0);

这是solution的JSFiddle。

enter image description here

Answer 2

现代CSS为此类任务提供了一个特殊模块：CSS Shapes。 Adobe创建了polyfill。也许有帮助？

Answer 3

将顶部div设为固定高度（临时），即您希望非倾斜文本显示的高度。看起来你的底部固定高度为70px。

<style type="text/css">
    #topPart { height: 600px }
</style>

为了适应不同的屏幕高度，我们必须计算顶部div的正确尺寸，并在底部减去您需要的任何尺寸。

<script type="text/javascript">
window.onload=function(){
function resize()
{
    var heights = window.innerHeight;
    document.getElementById("topPart").style.height = heights - 70 + "px";
}
resize();
window.onresize = function() {
    resize();
};
}
</script>

我们将在浏览器窗口更改时随时运行调整大小。通过这样做，顶部div和底部将同步。

在页面html add（basic）

<div id="topPart">
<p>Some text or other divs whatever you like in here</p>
</div>
<div>
The bottom part - add your staggered divs here
</div>

您无法使用100％并期望它能够正常工作，请记住您需要减去底部部分。我开始减去大约150 - 200像素开始，所以你不要碰到屏幕的底部，搞砸了。页面将动态执行，您可以上下缩放页面。

那是'我试图理解这个... ...

浮动元素到底部

3 个答案: