前端知识复习:Html DIV 图文混排(文字放在图片下边)
时间: 2023-07-13 11:24:42 浏览: 72
要实现在图片下方添加文字的效果,可以使用HTML中的`<div>`和CSS中的`position`属性。
首先,将图片和文字都放在一个`<div>`标签中,如下所示:
```html
<div class="container">
<img src="your-image-url.jpg" alt="your-image">
<p>your text here</p>
</div>
```
然后,使用CSS对这个容器设置`position: relative`,并对文字设置`position: absolute`,并设置`bottom: 0`,这样就可以将文字放在图片下方了。
```css
.container {
position: relative;
}
.container p {
position: absolute;
bottom: 0;
}
```
完整的代码如下所示:
```html
<div class="container">
<img src="your-image-url.jpg" alt="your-image">
<p>your text here</p>
</div>
<style>
.container {
position: relative;
}
.container p {
position: absolute;
bottom: 0;
}
</style>
```
相关问题
Html DIV 多张图文混排(文字放在图片下边)
要实现在多张图片下方添加文字的效果,同样可以使用HTML中的`<div>`和CSS中的`position`属性。
首先,将每张图片和对应的文字都放在一个`<div>`标签中,如下所示:
```html
<div class="container">
<div class="item">
<img src="your-image-url1.jpg" alt="your-image1">
<p>your text here1</p>
</div>
<div class="item">
<img src="your-image-url2.jpg" alt="your-image2">
<p>your text here2</p>
</div>
<div class="item">
<img src="your-image-url3.jpg" alt="your-image3">
<p>your text here3</p>
</div>
</div>
```
然后,使用CSS对每个容器设置`position: relative`,并对每个文字设置`position: absolute`,并设置`bottom: 0`,这样就可以将每个文字放在对应的图片下方了。
```css
.container {
display: flex;
justify-content: space-between;
}
.item {
position: relative;
flex-basis: 30%;
}
.item p {
position: absolute;
bottom: 0;
width: 100%;
}
```
这里使用了`flex`布局来让每个容器之间有间隔,同时使用`flex-basis`来设置每个容器的宽度,可以根据需要进行调整。
完整的代码如下所示:
```html
<div class="container">
<div class="item">
<img src="your-image-url1.jpg" alt="your-image1">
<p>your text here1</p>
</div>
<div class="item">
<img src="your-image-url2.jpg" alt="your-image2">
<p>your text here2</p>
</div>
<div class="item">
<img src="your-image-url3.jpg" alt="your-image3">
<p>your text here3</p>
</div>
</div>
<style>
.container {
display: flex;
justify-content: space-between;
}
.item {
position: relative;
flex-basis: 30%;
}
.item p {
position: absolute;
bottom: 0;
width: 100%;
}
</style>
```
android edittext输入图片,Android:EditText插入图片实现图文混排
实现图文混排,可以使用一个自定义的 EditText 控件,并在其中添加一个 ImageView 控件来实现。
以下是实现方法:
1.创建一个自定义的带有 ImageView 控件的 EditText 控件。
```java
public class RichEditText extends androidx.appcompat.widget.AppCompatEditText {
public RichEditText(Context context) {
super(context);
}
public RichEditText(Context context, AttributeSet attrs) {
super(context, attrs);
}
public RichEditText(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
//插入图片
public void insertImage(Bitmap bitmap) {
SpannableString ss = new SpannableString(" ");
ImageSpan span = new ImageSpan(getContext(), bitmap);
ss.setSpan(span, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
append(ss);
}
}
```
2.在布局文件中使用自定义的 EditText 控件。
```xml
<com.example.richedittextdemo.RichEditText
android:id="@+id/edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
```
3.在 Activity 中获取自定义的 EditText 控件,并添加一个点击事件。
```java
public class MainActivity extends AppCompatActivity {
private RichEditText editText;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
editText = findViewById(R.id.edit_text);
editText.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//调用选择图片的方法
chooseImage();
}
});
}
//选择图片
private void chooseImage() {
Intent intent = new Intent(Intent.ACTION_PICK,
android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
startActivityForResult(intent, 1);
}
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
if (resultCode == RESULT_OK && requestCode == 1) {
try {
Uri selectedImage = data.getData();
InputStream inputStream = getContentResolver().openInputStream(selectedImage);
Bitmap bitmap = BitmapFactory.decodeStream(inputStream);
editText.insertImage(bitmap);
} catch (FileNotFoundException e) {
e.printStackTrace();
}
}
}
}
```
4.在 onActivityResult 方法中获取选择的图片,并调用自定义的 EditText 控件的 insertImage 方法,将图片插入到 EditText 中。
以上就是在 Android 中实现 EditText 插入图片并实现图文混排的方法。