Fatal编程技术网
  • html/
  • Html 旧浏览器的flexbox

Html 旧浏览器的flexbox

html jsp

Html 旧浏览器的flexbox,html,jsp,Html,Jsp,我正在处理旧的jsp项目，我需要为IE5-IE8实现一些功能，并将其打包到标记库中 这是我的密码： 布局。tld <?xml version="1.0" encoding="ISO-8859-1" ?> <!DOCTYPE taglib PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.2//EN" "http://java.sun.com/dtd/web-jsptaglibrary_1_2.dtd"> &

我正在处理旧的jsp项目，我需要为IE5-IE8实现一些功能，并将其打包到标记库中

这是我的密码：

布局。tld

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE taglib PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.2//EN" "http://java.sun.com/dtd/web-jsptaglibrary_1_2.dtd">

<taglib>
    <tlib-version>2.5</tlib-version>
    <jsp-version>1.2</jsp-version>
    <short-name>layout</short-name>
    <description>Vertical and horisontal box layout</description>

    <tag>
        <name>vbox</name>
        <tag-class>com.company.tag.layout.VBox</tag-class>
        <body-content>JSP</body-content>
        <description>
            Vertical box layout 
        </description>
        <attribute>
            <name>class</name>
        </attribute>
        <attribute>
            <name>style</name>
        </attribute>
    </tag>

    <tag>
        <name>hbox</name>
        <tag-class>com.company.tag.layout.HBox</tag-class>
        <body-content>JSP</body-content>
        <description>
            Horizontal box layout 
        </description>
        <attribute>
            <name>class</name>
        </attribute>
        <attribute>
            <name>style</name>
        </attribute>
    </tag>

    <tag>
        <name>box</name>
        <tag-class>com.company.tag.layout.Box</tag-class>
        <body-content>JSP</body-content>
        <description>
            The box with static or dynamic width or height derived from weight attribute
        </description>
        <attribute>
            <name>weight</name>
            <required>true</required>
        </attribute>
        <attribute>
            <name>class</name>
        </attribute>
        <attribute>
            <name>style</name>
        </attribute>
    </tag>

</taglib>
boxLayoutTest.jsp

<%@ taglib prefix="layout" uri="/WEB-INF/tld/layout.tld"%>
<!DOCTYPE html>
<html style="height: 100%;">
<body style="height: 100%; margin: 0">

    <layout:vbox>
        <layout:box weight="1" style="background: orange">
            Eve
        </layout:box>
        <layout:box weight="0" style="background: red">
            Jill<br><br><br><br>
        </layout:box>
        <layout:box weight="2" style="background: yellow;">
            <div style="width: 100%; height: 100%; background: green">John</div>
        </layout:box>
    </layout:vbox>

    <layout:hbox>
        <layout:box weight="1" style="background: orange; vertical-align: bottom; text-align: center">
            <span style="vertical-align: bottom;">Eve</span>
        </layout:box>
        <layout:box weight="0" style="width: 50px; background: red">
            This is some long text written
        </layout:box>
        <layout:box weight="2" style="background: yellow">
            <div style="width: 100%; height: 100%; background: green">John</div>
        </layout:box>
    </layout:hbox>

</body>
</html>


前夕
吉尔
约翰
前夕
这是一篇很长的文章
约翰
也就是说

<%@ taglib prefix="layout" uri="/WEB-INF/tld/layout.tld"%>
<!DOCTYPE html>
<html style="height: 100%;">
<body style="height: 100%; margin: 0">

    <table cellspacing="0" cellpadding="0" style="table-layout: fixed; width: 100%; height: 100%; border-collapse: collapse;">
        <tr style="height: 30%;">
            <td style="background: orange">Eve</td>
        </tr>
        <tr style="height: 0;">
            <td style="background: red">Jill<br> <br> <br> <br> <br> <br>
            </td>
        </tr>
        <tr style="height: 70%;">
            <td style="background: yellow">
                <div style="width: 100%; height: 100%; background: green">John</div>
            </td>
        </tr>
    </table>

    <table cellspacing="0" cellpadding="0" style="table-layout: fixed; width: 100%; height: 100%; border-collapse: collapse">
        <tr>
            <td style="width: 30%; background: orange">Eve</td>
            <td style="width: 50px; background: red">This is some long text written</td>
            <td style="width: 70%; background: yellow">
                <div style="width: 100%; height: 100%; background: green">John</div>
            </td>
        </tr>
    </table>

</body>
</html>


前夕
吉尔
约翰
前夕
这是一篇很长的文章
约翰
最终拍摄失败：无法使“绿约翰”填充表数据空间。我读过很多书，说这是一项不平凡的任务，但也许有人会想出一些绝妙的主意？

这是flex，带有一个“e”。与“柔性框”一样，
高度：100%
仅在父项（即
）具有定义的高度时才起作用。您可以给出td
位置：相对，然后给出“green john”div
位置：绝对；排名：0；底部：0；左：0；右：0
但如果行中的其他
td
s没有内容，则该值将下降。示例：（我给出elements类只是为了使内容更易于阅读）必须“让父级定义高度”，因为从一开始，所有浏览器的高度都是这样计算的。但是你的例子即使在最新的IE11上也不起作用。很遗憾，微软制造了一款浏览器。这将“如预期”起作用(

import static java.lang.Float.parseFloat;
import static java.lang.String.format;
import java.io.IOException;

import com.company.tag.layout.Box.BoxData;

public class HBox extends AbstractBoxLayout {
    private static final long serialVersionUID = -1556868158755870941L;

    @Override
    void writeBoxes(float totalWeight) throws IOException {
        pageContext.getOut().write("<tr>");
        for (BoxData box : boxes) {
            float weight = parseFloat(box.weight);
            pageContext.getOut().write(format("<td %s>\n",
                    formatStyle(format("width: %s; overflow: hidden", deriveWeight(totalWeight, weight)), box.style)));
            pageContext.getOut().write(box.content);
            pageContext.getOut().write("\n</td>");
        }
        pageContext.getOut().write("</tr>");
    }
}



package com.company.tag.layout;

import static com.google.common.base.Preconditions.checkState;

import javax.servlet.jsp.JspException;
import javax.servlet.jsp.tagext.BodyContent;
import javax.servlet.jsp.tagext.BodyTagSupport;
import javax.servlet.jsp.tagext.Tag;

public class Box extends BodyTagSupport {
    public static final class BoxData {
        String weight;
        String clazz;
        String style;
        String content;
    }

    private static final long serialVersionUID = -6446830382322868121L;

    private BoxData data = new BoxData();

    @Override
    public int doEndTag() throws JspException {
        Tag parent = this.getParent();
        checkState(parent instanceof AbstractBoxLayout, "Not enclosed with vbox or hbox");

        AbstractBoxLayout abl = (AbstractBoxLayout) parent;

        data.content = bodyContent.getString();
        abl.addBox(data);

        data = new BoxData();
        return EVAL_BODY_BUFFERED;
    }

    @Override
    public void setBodyContent(BodyContent b) {
        super.setBodyContent(b);
    }

    public void setWeight(String attrWeight) {
        data.weight = attrWeight;
    }

    public void setClass(String attrClass) {
        data.clazz = attrClass;
    }

    public void setStyle(String attrStyle) {
        data.style = attrStyle;
    }
}



<%@ taglib prefix="layout" uri="/WEB-INF/tld/layout.tld"%>
<!DOCTYPE html>
<html style="height: 100%;">
<body style="height: 100%; margin: 0">

    <layout:vbox>
        <layout:box weight="1" style="background: orange">
            Eve
        </layout:box>
        <layout:box weight="0" style="background: red">
            Jill<br><br><br><br>
        </layout:box>
        <layout:box weight="2" style="background: yellow;">
            <div style="width: 100%; height: 100%; background: green">John</div>
        </layout:box>
    </layout:vbox>

    <layout:hbox>
        <layout:box weight="1" style="background: orange; vertical-align: bottom; text-align: center">
            <span style="vertical-align: bottom;">Eve</span>
        </layout:box>
        <layout:box weight="0" style="width: 50px; background: red">
            This is some long text written
        </layout:box>
        <layout:box weight="2" style="background: yellow">
            <div style="width: 100%; height: 100%; background: green">John</div>
        </layout:box>
    </layout:hbox>

</body>
</html>



<%@ taglib prefix="layout" uri="/WEB-INF/tld/layout.tld"%>
<!DOCTYPE html>
<html style="height: 100%;">
<body style="height: 100%; margin: 0">

    <table cellspacing="0" cellpadding="0" style="table-layout: fixed; width: 100%; height: 100%; border-collapse: collapse;">
        <tr style="height: 30%;">
            <td style="background: orange">Eve</td>
        </tr>
        <tr style="height: 0;">
            <td style="background: red">Jill<br> <br> <br> <br> <br> <br>
            </td>
        </tr>
        <tr style="height: 70%;">
            <td style="background: yellow">
                <div style="width: 100%; height: 100%; background: green">John</div>
            </td>
        </tr>
    </table>

    <table cellspacing="0" cellpadding="0" style="table-layout: fixed; width: 100%; height: 100%; border-collapse: collapse">
        <tr>
            <td style="width: 30%; background: orange">Eve</td>
            <td style="width: 50px; background: red">This is some long text written</td>
            <td style="width: 70%; background: yellow">
                <div style="width: 100%; height: 100%; background: green">John</div>
            </td>
        </tr>
    </table>

</body>
</html>