是否有一种更简洁的方式来实现2个对齐的列，文本/图像？

Question

我对编程非常陌生，我想知道是否有一种更简单的方法实现这一点：左侧的文本框和右侧的图像都对齐。我添加了一个填充顶部来说明导航菜单。我可以用较少的代码行完成此操作吗？

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

而这里的小提琴link。我读过使用花车会容易得多，但我试过并失败了。任何帮助将不胜感激。

Answer 1

我通常使用百分比，显示：块和浮动这东西。然后我根据我想要做的事情调整边距和填充。

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/

Answer 2

divs默认为display: block，这意味着它们将拉伸它们的容器的全部宽度，除非它们的宽度被指定（或者您将display更改为其他内容）。

如果你想使用float风格，你需要采取的所有内容进行单独申报单，这将离开你是这样的：

<div class="intro"> 
    <img style = "float: right; max-width: 50%" id="obj" src="http://i.imgur.com/8EL2PCM.jpg"> 
    <h2 id="head">text text</h2> 
    <p id="info"> text text text text text text</p> 
</div> 

因为p和img是内嵌在默认情况下，他们不不会占用比他们需要更多的空间。请注意，我已将样式设置为内嵌图像。你可以将它们移动到你的样式表来获得相同的效果。图像默认情况下会以其实际尺寸进行渲染，这就是为什么我将max-width设置为50％。如果您使用的图像的大小已经达到您想要渲染的大小，则不需要执行此操作。

如果要在所有文字上应用样式，而不是div，请将文字包装在span（默认为display: inline元素）中。或者只是给你的p标签类或ID。这些也是display:inline。