Question

我对编程很新，我想知道是否有更简单的方法来实现这一点：左边的文本框和右边的图像都是对齐的。我添加了一个填充顶部来计算导航菜单。我可以用更少的代码行完成这个吗？

import MyComponent from './MyComponents/MyComponent'

这里是CSS：

<?php 

        $content = file_get_contents("https://www.stratisrate.com/");

        echo $content;

    ?>

这是一个小提琴link。我已经读过使用花车会更容易，但我尝试过但都失败了。任何帮助将不胜感激。

Answer 1

默认情况下，

div是display: block，这意味着除非指定了宽度，否则它们将展开其容器的整个宽度（或者将display更改为其他内容。）

如果你想使用浮动样式，你需要从各个div中取出所有内容，这样会留下这样的内容：

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

Answer 2

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

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/

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

2 个答案: