html - HTML div の配置の問題 (固定幅なし)

Question

http://jsfiddle.net/Lijo/9sWbc/1/に示すように、HTML があります。住所を 1 行に、他の 3 つの列 (都市と国) を 2 行目に作成する必要があります。各列の幅は固定しないでください。どうすればそれを達成できますか？

Answer 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;
}

Answer 2

http://jsfiddle.net/9sWbc/7/ この jsfiddle リンクを確認してください。最初の行に住所が表示され、2 行目にアブド市の州郡が表示されます。

Answer 3

このスニペットでは、住所が 1 行に表示され、他の 3 つの列 (都道府県と国) が 2 行目に表示されます。

<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>