html - 如何在数据行中排列我的图片和文字？

Question

我试图将第一个日期行与第一个 div 中的图像和第二个 div 中的文本对齐。看起来不错，除了文本被推到右边之外

在我的第二个 div 中，它看起来不错。对齐可能有点偏差。

你能帮忙吗？

这是我的 jsfiddle:http://jsfiddle.net/huskydawgs/z9j9rsz2/6/

这是我的代码:

<div class="wrapper-data">
    <div class="data_row">
        <div class="data_cell1_rt-20-80"><img alt="Seattle" src="http://www.alltooflat.com/pranks/myths/penny/spaceneedle_big_3.jpg" height="150" width="144"></div>

        <div class="data_cell2_rt-20-80">&nbsp;</div>

        <div class="data_cell3_rt-20-80">
            <p>Seattle a coastal seaport city and the seat of King County, in the U.S. state of Washington. With an estimated 652,405 residents as of 2013, Seattle is the largest city in the Pacific Northwest region of North America and the fastest-growing major city in the United States.[5] The Seattle metropolitan area of around 3.6 million inhabitants is the 14th largest metropolitan area in the United States.[6] The city is situated on a narrow isthmus between Puget Sound (an inlet of the Pacific Ocean) and Lake Washington, about 100 miles (160 km) south of the Canada–United States border. A major gateway for trade with Asia, Seattle is the 8th largest port in the United States and 9th largest in North America in terms of container handlin</p>
        </div>
    </div>
</div>

    <div class="wrapper-data">
        <div class="data_row">
            <div class="data_cell1_lt-20-80">
                <p>The only consolidated city-county in California,[12] San Francisco encompasses a land area of about 46.9 square miles (121 km2)[13] on the northern end of the San Francisco Peninsula, giving it a density of about 17,867 people per square mile (6,898 people per km2). It is the most densely settled large city (population greater than 200,000) in the state of California and the second-most densely populated major city in the United States after New York City.[14] San Francisco is the fourth-most populous city in California, after Los Angeles, San Diego and San Jose, and the 14th-most populous city in the United States—with a Census-estimated 2013 population of 837,442.[11] The city is also the financial and cultural hub of the larger San Jose-San Francisco-Oakland combined statistical area, with a population of 8.5 million.</p>
            </div>
        <div class="data_cell2_lt-20-80">&nbsp;</div>

        <div class="data_cell3_rt-20-80">
            <img alt="San Fran" src="http://www.destination360.com/north-america/us/california/san-francisco/images/s/golden-gate-bridge-history.jpg" height="150" width="144">
        </div>
    </div>
</div>

这是我的CSS:

.wrapper-data {
    position:relative;
    width:100%;
    border: none;
    margin: 40px 0 0 0;
    overflow: hidden;
}

.data_row {
    height:100%;
    min-height:100%;
    white-space:nowrap;
    display:table;
    width: 100%;
}

.data_cell1_lt-20-80 {
    width:20%;
    white-space:normal;
    display:table-cell;
    vertical-align:top;
}

.data_cell2_lt-20-80 {
    width:6%;
    display:table-cell;
    white-space:normal;
}

.data_cell3_lt-20-80 {
    width:74%;
    display:table-cell;
    white-space:normal;
}

    .data_cell3_lt-20-80 img {
    display:block; 
    margin:0 auto;
    }
    .data_cell3_lt-20-80 p {
    text-align:left;
    }

.data_cell1_rt-20-80 {
    width:74%;
    white-space:normal;
    display:table-cell;
}

.data_cell2_rt-20-80 {
    width:6%;
    display:table-cell;
    white-space:normal;
}

.data_cell3_rt-20-80 {
    width:20%;
    display:table-cell;
    white-space:normal;
    vertical-align:top;
}

Answer 1

我修复了 CSS。我有一个重复的样式。