0

我有一个 HTML，如http://jsfiddle.net/Lijo/9sWbc/1/所示。我需要在一行中制作地址，在第二行中制作其他三列（城市州和国家/地区）。每列的宽度不应该是固定的。我们怎样才能实现它？

4

3 回答 3

1

我想这就是你需要的：http: //jsfiddle.net/9sWbc/6/

编辑的CSS：

#infoDiv
{
     width:550px;
     border:1px solid Red;
}
.dataLine
{    
    width:100%;
    min-width:650px;
    height:auto;
    margin:1px 1px 1px 1px;
    padding: 0 0 0 0px;
    /*border:1px solid Cyan;*/
}
.freeTwoColumnFirstEntry
{    
    height:auto;
    margin:0 0 0 0px;
    padding:0 0 0 2px;
    font:normal 9pt Arial;
    display:inline;

}
.freeTwoColumnSecondEntry
{    
    height:auto;
    margin:0 0 0 0px;
    padding:0 0 0 2px;
    font:normal 9pt Arial;
    display:inline;

}
#cityDiv, #cityDivVal, #stateDiv, #stateDivVal, #countryDiv, #countryDivVal{
    display:inline-block;
}
于 2012-07-16T08:55:44.570 回答
1

http://jsfiddle.net/9sWbc/7/ 检查这个 jsfiddle 链接，它在第一行显示地址，在第二行显示 abd 市州县。

于 2012-07-16T08:59:14.320 回答
0

此代码段将使地址在一行中，其他三列（城市州和国家/地区）在第二行中。

<div id="wrapper1">
    <div id="container1">
        <div id="header1">
        </div>
        <div class="clear">
        </div>
        <div id="centralContainer1">
            <div id="mainContainer1">
                <div id="contentHolderDiv1" class="contentHolderDiv1">
                    <div id="searchContainer" class="searchContainer">
                        <div id="entryValues" class="searchValuesDiv">
                            <div id="infoDiv">

                                <div id="address1Div" class="dataLine">
                                    <span class="freeTwoColumnFirstEntry">
                                        Address:
                                    </span>
                                    <span class="freeTwoColumnSecondEntry">
                                        <span id="detailContentPlaceholder_lblAddress1">Santhom Avenue, 3456</span>
                                    </span>
                                </div>

                                <div id="cityStateCountryDiv" class="dataLine">
                                    <span id="cityDiv" class="freeTwoColumnFirstEntry">
                                        City:
                                    </span>
                                    <span id="cityDivVal" class="freeTwoColumnSecondEntry">
                                        <span id="detailContentPlaceholder_lblCity">Akron</span>
                                    </span>
                                    <span id="stateDiv" class="freeTwoColumnFirstEntry">
                                        State:
                                    </span>
                                    <span id="stateDivVal" class="freeTwoColumnSecondEntry">
                                        <span id="detailContentPlaceholder_lblState">OH</span>
                                    </span>
                                    <span id="countryDiv" class="freeTwoColumnFirstEntry">
                                        Country:
                                    </span>
                                    <span id="countryDivVal" class="freeTwoColumnSecondEntry">
                                        <span id="detailContentPlaceholder_lblCountry">United States</span>
                                    </span>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="clear">
                    </div>
                </div>
            </div>
            <div class="clear">
            </div>
        </div>
    </div>
</div>
于 2012-07-16T09:10:52.150 回答