Question

在Visual Studio中，CSS文件具有此功能。我试图使用内联代码并排浮动这两个框，如果可能的话不改变实际的CSS文件。在ASCX文件中，我的代码为： -

 <h2 class="QuickLinks">
                    Build Release Notes</h2>
                <div class="QuickLinks">
    <p> There is a list of very long law statutory codes but putting this as a test only </p>
    <div>

    <h2 class="QuickLinks">
                   Supplemental Release Notes</h2>
                <div class="QuickLinks">
    <p> here is a list of very long law statutory codes/ links and pdf links but putting this as a test only </p>
    </div>

css文件（示例）有100个设置，但我发现了这个：

    div#MainContent h2.QuickLinks, div#MainContent h2.QuickLinks a:link, div#MainContent h2.QuickLinks a:visited, div#MainContent h2.QuickLinks a:hover, div#MainContent h2.QuickLinks a:visited, div#MainContent h2.QuickLinks a:hover {
        background-image: url(images/mc/mc_03.jpg);
        background-color: #b0b0b0;
        color: #000;
    }

    div#MainContent div.QuickLinks {
        border: 2px solid #b0b0b0;
        border-top: none;

    }

Answer 1

你需要将每个部分包装在一个容器中，然后浮动容器或给它们显示内联块以使它们并排放置。

HTML：

<div class="QuickLinks-Container" style="float:left;width:48%;">
    <h2 class="QuickLinks">Build Release Notes</h2>
    <div class="QuickLinks">
        <p>There is a list of very long law statutory codes but putting this as a test only</p>
    </div>
</div>
<div class="QuickLinks-Container" style="float:left;width:48%;">
    <h2 class="QuickLinks">Supplemental Release Notes</h2>
    <div class="QuickLinks">
        <p>here is a list of very long law statutory codes/ links and pdf links but putting this as a test only</p>
    </div>
</div>

小提琴：http://jsfiddle.net/xupxf3um/

Answer 2

这是实际的代码。我没有引用所有这些链接和文档。我无法理解为什么它不会漂浮在顶部的2个单独的盒子上。

＆lt;％@ Control Language =＆＃34; C＃＆＃34; AutoEventWireup =＆＃34;真＆＃34;代码隐藏=＆＃34; KnowledgeBase.ascx.cs＆＃34;继承=＆＃34; Control_KnowledgeBase＆＃34; ％GT; 系统知识库首页我的客户服务我现场客户服务我退出了

<h2 class="Billboard">
            General System Information</h2>
        <div class="Billboard">
            <p>
                80 Links and Documents
            </p>
        </div>

        <h2 class="QuickLinks">
            Build Release Notes</h2>
        <div class="QuickLinks"style="float:left;width:48%;">

                <p>
             120 Links and Documents

                </p>

            </div>

        </div>


        <h2 class="QuickLinks">
            Supplemental Release Notes</h2>
        <div class="QuickLinks"style="float:left;width:48%;">

                <p>

10 Link and Documents

                </p>
             </div>


        <h2 class="Billboard">
            TFACTS Customer Care</h2>
        <div class="Billboard">
            <p>
                10 Link and Documents
            </p>
        </div>
        <h2 class="Billboard">
            Reference Materials and Storyboards
        </h2>
        <div class="Billboard">
            <p>
                250 Links and documents
            </p>
        </div>
        <!-- InstanceEndEditable -->
    </div>

    <!-- CLOSES THE MAIN CONTENT DIV -->

ASCX内联DIV风格？

2 个答案: