Question

基本上，正如标题所说，我试图将一张<div>图像放在另一张图像下面，但却遇到了麻烦。

到目前为止我的CSS是：

#rightimg img{
  max-width: 25%;
  height: inherit;
  left: 0px;
  right: 0px;
  border: solid black 2px;
  float:right;
  padding:0px;
}

#rightimg:after{
  content:'';
  clear:both;
  clear:right;
}

clear: right;是我最近尝试改变这个问题，但没有成功 - 尝试删除clear: both;并选择合适的问题，但没有成功。还尝试使用<br>，但只是移动了整个<div>图片：

尝试实现（蓝色是图像，白色是文本）：

当前HTML：

<div id="rightimg">
    <img src="SLL/hammer.png"/>
</div>

    <div id="right_col">
        <h2>Letting Management</h2>
            <p>Lorem ipsum dolor sit amet, pri et case persecuti, enim iuvaret nec at, adhuc labores eos ei. Eu eum prima ignota, falli audiam minimum ne ius. His an inani scripta. Case phaedrum ei eos, amet dicam eloquentiam ex pro. An modus perpetua duo, ei mel erat dicat, eam ea mucius argumentum. Sit ea elit accusam, exerci maiorum iudicabit ne mea.</p>
    </div>

不确定它是否应该位于向左或向右浮动的列下。

Answer 1

好的......所以，首先，我建议您采用Bootstrap等响应式框架吗？它会让你的生活更轻松！

只需将此信息包含在您页面的<head>中即可...

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

或下载文件并将其作为本地资源自行包含。

然后，您可以使用以下标记为您提供您正在寻找的架构。

HTML

<div class="row">
    <div class="col-xs-2">
        <img src="whatever.jpg" alt="whatever" />
    </div>
    <div class="col-xs-10">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed ultrices ante. Sed dolor est, fringilla id egestas id, pulvinar ac nisl. Integer sed laoreet nisl, id finibus ligula. Proin auctor tempor nunc, quis lobortis justo accumsan et. Duis viverra malesuada tincidunt.</p>
    </div>
</div>

<div class="row">
    <div class="col-xs-10">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed ultrices ante. Sed dolor est, fringilla id egestas id, pulvinar ac nisl. Integer sed laoreet nisl, id finibus ligula. Proin auctor tempor nunc, quis lobortis justo accumsan et. Duis viverra malesuada tincidunt.</p>
    </div>
    <div class="col-xs-2">
        <img src="whatever.jpg" alt="whatever" />
    </div>
</div>

<div class="row">
    <div class="col-xs-2">
        <img src="whatever.jpg" alt="whatever" />
    </div>
    <div class="col-xs-10">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed ultrices ante. Sed dolor est, fringilla id egestas id, pulvinar ac nisl. Integer sed laoreet nisl, id finibus ligula. Proin auctor tempor nunc, quis lobortis justo accumsan et. Duis viverra malesuada tincidunt.</p>
    </div>
</div>

Answer 2

https://jsfiddle.net/x30mpo9z/

您可以在此处看到我为左右浮动/定位图像添加了2个类，.image-left和.image-right。我将.content div向左浮动，.row div设置为clear:both

这个小提琴是一个非常小的解决方案，你可以扩展。

Answer 3

只需将蓝色框替换为您的图像，就应该全部设置好。重要的是你需要额外的HTML围绕每个元素来创建行。

这消除了绝对定位的需要，并允许您浮动项目而不会破坏它们上方和下方的其他元素。

＆＃13;

public class DrawerPrincipal extends AppCompatActivity
    implements NavigationView.OnNavigationItemSelectedListener,FragmentoPrincipalUsuario.OnFragmentInteractionListener {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_drawer_principal);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    //cargar fragment principal usuario

    FragmentoPrincipalChofer fragmento=(FragmentoPrincipalChofer) getSupportFragmentManager().findFragmentByTag("fragmento");
    if (fragmento==null){
        fragmento=new FragmentoPrincipalChofer();
        android.support.v4.app.FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
        transaction.add(android.R.id.content,fragmento,"fragmento");
        transaction.commit();

    }


    DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
    ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
            this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
    drawer.setDrawerListener(toggle);
    toggle.syncState();

    NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
    navigationView.setNavigationItemSelectedListener(this);
}

＆＃13;

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}
.row {
  clear: both;
  padding: 10px;
  overflow: hidden
}
.left_row .content {
  float: left;
  padding: 0 10px 0 0;
  width: 75%
}
.right_row .content {
  float: right;
  padding: 0 0 0 10px;
  width: 75%
}
.right_image,
.left_image {
  background: blue;
  border: solid black 2px;
  float: right;
  height: 100px;
  padding: 0;
  width: 25%
}
.left_image {
  float: left
}

＆＃13;

Answer 4

为此使用nth-child，

div.main{
height:auto;
overflow:hidden;
width:100%;
position:relative;
clear:both;
}
div.img{
width:25%;
float:left;
height:200px;
}

div.main:nth-child(2) div.img{
 float:right;
}

div.content{
width:75%;
float:right;
height:200px;    
}
div.img img{
width:100%;
}

div.main:nth-child(2) div.content{
 float:left;
}


<div class="main">
  <div class="img"><img src="" alt="" /></div>
  <div class="content"></div>
</div>

<div class="main">
  <div class="img"><img src="" alt="" /></div>
  <div class="content"></div>
</div>

<div class="main">
  <div class="img"><img src="" alt="" /></div>
  <div class="content"></div>
</div>

Answer 5

您可以使用值为ggplot(iris,aes(x=Sepal.Width,y=Petal.Width,color=Species,size=Sepal.Length))+ geom_point() + scale_size_continuous(breaks=c(seq(from=5,to=7,by=0.4))) + guides(size=guide_legend(direction='horizontal')) + facet_wrap(~Species,ncol = 2) + theme(legend.position=c(.7,.2))，display和table的{{1}}属性构建“CSS表格”。它呈现就像一个表，除了它不是这样，它没有与表格数据在语义上相关联。

table-row

table-cell

将一个<div>放在另一个下面

5 个答案: