Question

我很难将<div>的高度边框设为<p>

这是我的代码：

div.relative {
  position: absolute;
  border: 3px solid #73AD21;
}

p.parag {
  position: relative;
  border: 3px solid #A3AD11;
}

<h2>position: relative;</h2>

<p>An element with position: relative; is positioned relative to its normal position:
</p>

<div class="relative">
  <p class="parag">
    This div element has position: relative;</p>
</div>

我只是让宽度相同，但我不知道如何制作高度。这是JSFiddle

Answer 1

使用display:table-cell

＆＃13;

div.relative {
 
    position:absolute;
    border: 3px solid #73AD21;
    display:flex;
    display:table-cell;
   
}
p.parag {
    position:relative;
    border: 3px solid #A3AD11;  
    display:table-cell;
   
}

＆＃13;

<body>

<h2>position: relative;</h2>

<p>An element with position: relative; is positioned relative to its normal position:</p>

<div class="relative"><p class="parag">
This div element has position: relative;</p>
</div>
<div style="clear:both;float:none;"></div>
</body>

＆＃13;

或者您可以为<p>标记提供0的边距，如下所示：

＆＃13;

div.relative {
    position:absolute;
    border: 3px solid #73AD21;
    display:flex;
}
p.parag {
    margin: 0;
	  position:relative;
    border: 3px solid #A3AD11;
   
}

＆＃13;

<body>

<h2>position: relative;</h2>

<p>An element with position: relative; is positioned relative to its normal position:</p>

<div class="relative"><p class="parag">
This div element has position: relative;</p>
</div>
<div style="clear:both;float:none;"></div>
</body>

＆＃13;

Answer 2

<p>标记默认有边距。你需要删除它们：

div.relative {
position:absolute;
border: 3px solid #73AD21;
}
p.parag {
position:relative;
border: 3px solid #A3AD11;
margin: 0px;
}

<h2>position: relative;</h2>

<p>An element with position: relative; is positioned relative to its normal 
position:</p>

<div class="relative"><p class="parag">
This div element has position: relative;</p>
</div>
<div style="clear:both;float:none;"></div>

希望这就是你要找的东西。

Answer 3

尝试添加

.title-boss-offset, .title-boss {
  /* other props */
  float: left;
}

到p.parag

Answer 4

示例图片：

enter image description here

如果您想要附加图像之类的东西，那么您必须简单地执行此操作：

package com.mygdx.game.Screens;

import Artifacts.Champ;
import com.badlogic.gdx.Game;
import com.badlogic.gdx.Screen;
import com.badlogic.gdx.Game;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.Screen;
import com.badlogic.gdx.graphics.*;
import com.badlogic.gdx.graphics.g2d.BitmapFont;
import com.badlogic.gdx.graphics.g2d.Sprite;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.scenes.scene2d.*;
import com.badlogic.gdx.scenes.scene2d.ui.*;
import com.badlogic.gdx.scenes.scene2d.ui.ImageButton.ImageButtonStyle;
import com.badlogic.gdx.scenes.scene2d.utils.SpriteDrawable;
import com.badlogic.gdx.utils.Align;
import com.badlogic.gdx.utils.viewport.ScreenViewport;
import com.mygdx.game.MyGdxGame;
import java.util.ArrayList;

public class GameScreen implements Screen {
    private Stage stage;
    private Game game;
    ArrayList <Champ> champs=new ArrayList();;

    public GameScreen(Game aGame) {
        game = aGame;
        stage = new Stage(new ScreenViewport());
        ImageButton pj;

        Table camp;
        champs.add(new Champ("Ximet",new Texture("Champ/Ximet.png")));        
        champs.add(new Champ("Jordi",new Texture("Champ/Jordi.jpg")));        
        champs.add(new Champ("Camilo",new Texture("Champ/Camilo.jpg")));        
        champs.add(new Champ("Vicent",new Texture("Champ/Vicent.jpg")));
        int x=100, y=250;
        for (final Champ champ : champs) {
            camp=new Table();
            pj=new ImageButton(new SpriteDrawable(new Sprite(champ.getLogo())));
            pj.setPosition(x, y);
            camp.add(pj).size(100, 100);
            camp.setPosition(x, y);
            x=x+100;
            camp.addListener(new InputListener(){
                @Override
                public void touchUp (InputEvent event, float x, float y, int pointer, int button) {
                    Label name = new Label(champ.nom, MyGdxGame.gameSkin,"big-black");
                    name.setPosition(10,400);
                    stage.addActor(name);
                }
                @Override
                public boolean touchDown (InputEvent event, float x, float y, int pointer, int button) {
                    return true;
                }
            });
            stage.addActor(camp);
        }
        Label title = new Label("Select Champ", MyGdxGame.gameSkin,"big-black");
        title.setAlignment(Align.center);
        title.setY(Gdx.graphics.getHeight()*2/3);
        title.setWidth(Gdx.graphics.getWidth());
        stage.addActor(title);

        TextButton backButton = new TextButton("Back",MyGdxGame.gameSkin);
        backButton.setWidth(Gdx.graphics.getWidth()/2);
        backButton.setPosition(Gdx.graphics.getWidth()/2-backButton.getWidth()/2,Gdx.graphics.getHeight()/4-backButton.getHeight()/2);
        backButton.addListener(new InputListener(){

            @Override
            public void touchUp (InputEvent event, float x, float y, int pointer, int button) {
                game.setScreen(new Principal((MyGdxGame)game));
            }
            @Override
            public boolean touchDown (InputEvent event, float x, float y, int pointer, int button) {
                return true;
            }
        });
        stage.addActor(backButton);
    }

    @Override
    public void show() {
        Gdx.app.log("MainScreen","show");
        Gdx.input.setInputProcessor(stage);

    }

    @Override
    public void render(float delta) {
        Gdx.gl.glClearColor(1, 1, 1, 1);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
        stage.act();
        stage.draw();
    }

    @Override
    public void resize(int width, int height) {

    }

    @Override
    public void pause() {

    }

    @Override
    public void resume() {

    }

    @Override
    public void hide() {

    }

    @Override
    public void dispose() {
        stage.dispose();
    }

}

如何使<div>边框大小与<p>相同？

4 个答案: