html - 是否有更清晰/更简单的方法来实现 2 个对齐的列、文本/图像？

Question

我是编程的新手，我想知道是否有更简单的方法来实现这一点:左边的文本框和右边的图像都对齐。我添加了一个 padding-top 来解释导航菜单。我可以用更少的代码行来完成这个吗？？

<div class="intro">
    <div id="text">
        <h2 id="head">Quiénes Somos</h2>
        <p id="info"> text text text text</p>
    </div>

    <div id="image">
        <img id="obj" src="images/pyme.jpg">
    </div>
</div>

这是 CSS:

    .intro {
    text-align: center;
    padding-top: 135px;
}

.intro #text {
    vertical-align: top;
    width: 40%;
    display: inline-block;
    padding: 10px;
    border: 1px solid black;
}

.intro #text #head {
    background-color: #d45029;
    text-align: left;
    border-radius: 7px;
}

.intro #text #info {
    margin-top: 10px;
    text-indent: 50px;
    text-align: justify;
}

.intro #image {
    width: 40%;
    display: inline-block;
    padding:10px;
    border: 1px solid black;
}

.intro #image #obj {
    max-width: 100%;
}

这是一把 fiddle link .我读过使用 float 会容易得多，但我尝试过但失败了。任何帮助将不胜感激。

Answer 1

我通常使用百分比、显示: block 和 float 来处理这些东西。然后我根据我想做的事微调边距和填充。

html

<div class="divs-wrapper">
    <div class="div-1">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac dictum lectus, id tristique elit. Integer tincidunt sollicitudin magna a congue.</p>
    </div>  
    <div class="div-2">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac dictum lectus, id tristique elit. Integer tincidunt sollicitudin magna a congue.</p>
    </div>
</div>

CSS

.divs-wrapper {
    width: 80%;/* width of wrapper */
    display: block;/* display block allows margin and width setting */
    margin: 0 auto;/* centers wrapper in 100% width body */
}

.div-1 {
    width: 49%;/* div 1 half width of wrapper */
    display: block;/* display block allows floats */
    float: left;/* float left to allow alignment of elements next to eachother */
    padding: .5%;/* padding for spacing */
}

.div-2 {
    width: 49%;/* div 2 half width of wrapper */
    display: block;/* display block allows floats */
    float: left;/* float left to allow alignment of elements next to eachother */
    padding: .5%;/* padding for spacing */
}

我的演示 https://codepen.io/rw1982/pen/eWwZjB

如果您不熟悉 html 和 css，并且想要设置列或网格以在响应级别上工作。试试这些链接开始吧。

响应式网格 http://www.responsivegridsystem.com/